Sunday, August 4, 2013

HTML, CSS related: Show Div on 'hover' with only CSS

I have seen empty <a> followed by div elements sometimes (like below):
<a>Menu Item</a>
<div>
   some stuff
</div>

The reason for the empty <a> elements is probably the below: 
http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css
Assuming HTML4, with this markup:
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
You can do something like this:
div {
    display: none;
}

a:hover + div {
    display: block;
}
This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.
HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change thedisplay property of another element.

jsfiddle example:

No comments:

Post a Comment

Followers

Blog Archive