Skip to content
Fix Code Error

Using only CSS, show div on hover over

March 13, 2021 by Code Error
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

Related Articles

  • Having trouble with my nav bar/header, It used to work but…
  • React Multi-level push menu SCSS Back button not working
  • Trying to keep dropdown menus flush to the edge of header…
  • Active tab issue on page load HTML
  • Hide one dropdown in side menu when another opens
  • How to implement a Navbar Dropdown Hover in Bootstrap v4?
  • Fix top buttons on scroll of list below
  • Polymer - How to data-bind paper-dropdown menu selections to…
  • Navbar not filling width of page when reduced to mobile view
  • After a little scroll, the sticky navbar just is not fixed…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Simple example of threading in C++

Next Post:

Find which version of package is installed with pip

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error