{"id":14200,"date":"2011-09-06T20:05:52","date_gmt":"2011-09-07T03:05:52","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14200"},"modified":"2021-07-14T12:28:35","modified_gmt":"2021-07-14T19:28:35","slug":"hover","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/hover\/","title":{"rendered":":hover"},"content":{"rendered":"\n

The :hover<\/code> pseudo class in CSS selects elements when the mouse cursor is current over them. It\u2019s commonly associated with link (<a><\/code>) elements.<\/p>\n\n\n\n

a:hover {\n  color: green;\n  text-decoration: underline overline;\n}<\/code><\/pre>\n\n\n\n
So when a link like this is \u201chovered\u201d (like with a cursor on a device with a mouse):<\/p>\n\n\n\n
<a href=\"https:\/\/google.com\">Go to Google<\/a><\/code><\/pre>\n\n\n\n
It will turn green and have a line beneath and above it.<\/p>\n\n\n\n
In IE 6 and below, :hover<\/code> used to only<\/em> work on links, but in newer browsers, it works on any element. This can be particularly useful for things like dropdown menus in which you can wait for the :hover<\/code> of a parent list item and then reveal the next level of the nested menu. Careful though, hover effects should be coupled with some kind of action, as that has been a long-established web pattern.<\/p>\n\n\n
<\/a>Browser support<\/h3>\n\n\n
IE<\/th>Edge<\/th>Firefox<\/th>Chrome<\/th>Safari<\/th>Opera<\/th><\/tr><\/thead>
All<\/td>All<\/td>All<\/td>All<\/td>All<\/abbr><\/td>All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Android Chrome<\/th>Android Firefox<\/th>Android Browser<\/th>iOS Safari<\/th>Opera Mobile<\/th><\/tr><\/thead>
All<\/td>All<\/td>All<\/td>All<\/td>All<\/td><\/tr><\/tbody><\/table>
Source: caniuse<\/a><\/figcaption><\/figure>\n\n\n
<\/a>Related properties<\/h3>\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      :link    <\/a>\n  <\/h3>\n\n      \n      a:link { color: #f8a100; }<\/code>\n    <\/a>\n  \n      
\n      hover<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      :active    <\/a>\n  <\/h3>\n\n      \n      a:active { color: #f8a100; }<\/code>\n    <\/a>\n  \n      
\n      hover<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      :any-link    <\/a>\n  <\/h3>\n\n      \n      .element:any-link { color: red; }<\/code>\n    <\/a>\n  \n      
\n      hover<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      :focus    <\/a>\n  <\/h3>\n\n      \n      textarea:focus { background: pink; }<\/code>\n    <\/a>\n  \n      
\n      hover<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      :visited    <\/a>\n  <\/h3>\n\n      \n      a:visited { color: #777; }<\/code>\n    <\/a>\n  \n      
\n      hover<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"
The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It\u2019s commonly associated with link (<a>) elements. So when a link like this is \u201chovered\u201d (like with a cursor on a device with a mouse): It will turn green and have a line beneath and above it. In IE 6 and […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14198,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1373],"acf":[],"jetpack-related-posts":[{"id":18170,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/pointer-events\/","url_meta":{"origin":14200,"position":0},"title":"pointer-events","date":"June 20, 2013","format":false,"excerpt":"The pointer-events property allows for control over how HTML elements respond to mouse\/touch events \u2013 including CSS hover\/active states, click\/tap events in Javascript, and whether or not the cursor is visible. .avoid-clicks { pointer-events: none; } While the pointer-events property takes eleven possible values, all but three of them are\u2026","rel":"","context":"In \"pointer-events\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5184,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-only-image-preloading\/","url_meta":{"origin":14200,"position":1},"title":"CSS Only Image Preloading","date":"December 30, 2009","format":false,"excerpt":"One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14043,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/cursor\/","url_meta":{"origin":14200,"position":2},"title":"cursor","date":"September 5, 2011","format":false,"excerpt":"The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it's only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the\u2026","rel":"","context":"In \"cursor\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9847,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/calculate-distance-between-mouse-and-element\/","url_meta":{"origin":14200,"position":3},"title":"Calculate Distance Between Mouse and Element","date":"June 19, 2011","format":false,"excerpt":"(function() { var mX, mY, distance, $distance = $('#distance span'), $element = $('#element'); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()\/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()\/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; distance = calculateDistance($element, mX, mY); $distance.text(distance); }); })(); This code will calculate the\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3327,"url":"https:\/\/css-tricks.com\/snippets\/css\/give-clickable-elements-a-pointer-cursor\/","url_meta":{"origin":14200,"position":4},"title":"Give Clickable Elements a Pointer Cursor","date":"August 10, 2009","format":false,"excerpt":"a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; } Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class \"pointer\" for applying it to other clickable things as needed.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154528,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/20-data-data-data-attrdata\/","url_meta":{"origin":14200,"position":5},"title":"#20: Data! data-*! .data()! .attr(data-*)!","date":"October 29, 2013","format":false,"excerpt":"Data. In the world of jQuery, it's all about bits of information that are attached directly to elements (rather than, say, a variable with onus only to itself). There is a ton of ways to save bits of data on the \"client side\" (in the browser, rather than the server).\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14200"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14200"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14200\/revisions"}],"predecessor-version":[{"id":344759,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14200\/revisions\/344759"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14198"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14200"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}