Using only CSS, show div on hover over
Posted By: Anonymous
I would like to show a div when someone hovers over an <a>
element, but I would like to do this in CSS and not JavaScript. Do you know how this can be achieved?
Solution
You can do something like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
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 the display
property of another element.
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.