Using only CSS, show div on hover over


Tags:
css

Problem :

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.


    CSS Howto..

    How to add 10 pixels to a dynamic top position in CSS using SASS

    CSS - How to have 100% height element inside of parent

    How to return a javascript set style property to CSS default

    less: how to import multiple css?

    How do I set dynamic width to a block element?

    How to center text over an image while keeping it below fixed nav bar in css?

    How to set up navigation with fading (sprite) background image

    how to make a list float left or not according to the size of the browser?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    CSS: how to do away with automatic rescaling of font-size on Safari

    CSS: how to have reposition relative to a centered background image

    how to center submenu under the parent `
  • `
  • How to format an HTML table using CSS for printing?

    CSS: how to get two floating divs inside another div

    Can someone tell me how to implement this Javascript? HTML CSS

    How to set a child's element 50px narrower to its parent element in css? [closed]

    How to include (referencing) CSS Javascript jQuery in master page and content (child) page

    How to identify element using link name in a onclick html tag?

    how to make html email look exactly the same as previewed just in browser?

    How can I draw such 2 lines in this shape using CSS HTML

    How do i create a responsive page with fixed positioned header and side nav using only html css?

    How to make CSS URL background images show up in localhost?

    How to select odd child of dl element with css?

    How to make my twitter bootstrap overlap all other elements?

    how to show images with it's original smoothness in IE

    How to change where a CSS transition starts from?

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    How to format a button with in Form tag, html?

    How to center a span inside a TD?