Using only CSS show div on hover over a

Question

I would like to show a div when someone hovers over an  lt a gt  element  but I would like to do this in CSS and not JavaScript  Do you know how this can be achieved

User · Answer

This answer doesn t require that you know the what type of display  inline  etc   the hideable element is supposed to be when being shown    x000D   x000D   hoverable not  hover     show-on-hover   x000D      display  none  x000D    x000D   lt a class  hoverable  gt Hover over me  lt  a gt  x000D   lt div class  show-on-hover  gt I m a block element  lt  div gt  x000D   x000D   lt hr   gt  x000D   x000D   lt a class  hoverable  gt Hover over me also  lt  a gt  x000D   lt span class  show-on-hover  gt I m an inline element  lt  span gt  x000D   x000D   x000D    This uses the adjacent sibling selector and the not selector

User · Answer

I would like to offer this general purpose template solution that expands on the correct solution provided by Yi Jiang s   The additional benefits include    support for hovering over any element type  or multiple elements  the popup can be any element type or set of elements  including objects  self-documenting code  ensures the pop-up appears over the other elements  a sound basis to follow if you are generating html code from a database    In the html you place the following structure    lt div class  information popup container  gt   lt div class  information  gt   lt  -- The thing or things you want to hover over go here such as images  tables        paragraphs  objects other divisions etc  -- gt    lt  div gt   lt div class  popup information  gt   lt  -- The thing or things you want to popup go here such as images  tables        paragraphs  objects other divisions etc  -- gt    lt  div gt   lt  div gt    In the css you place the following structure   div information popup container   position  absolute  width 0px  height 0px     Position Information       Appearance Information      div information popup container  gt  div information      Position Information       Appearance Information      div information popup container  gt  div popup information   position  fixed  visibility  hidden     Position Information       Appearance Information      div information popup container  gt  div information hover   div popup information   visibility  visible  z-index  200      A few points to note are    Because the position of the div popup is set to fixed  would also work with absolute  the content is not inside the normal flow of the document which allows the visible attribute to work well  z-index is set to ensure that the div popup appears above the other page elements  The information popup container is set to a small size and thus cannot be hovered over  This code only supports hovering over the div information element   To support hovering over both the div information and div popup then see Hover Over The Popup below  It has been tested and works as expected in Opera 12 16 Internet Explorer 10 0 9200  Firefox 18 0 and Google Chrome 28 0 15    Hover Over The Popup  As additional information   When the popup contains information that you might want to cut and paste or contains an object that you might want to interact with then first replace   div information popup container  gt  div information hover   div popup information   visibility  visible  z-index  200      with  div information popup container  gt  div information hover   div popup information   div information popup container  gt  div popup information hover   visibility  visible  z-index  200      And second  adjust the position of div popup so that there is an overlap with div information   A few pixels is sufficient to ensure that the div popup is can receive the hover when moving the cusor off div information   This does not work as expected with Internet Explorer 10 0 9200 and does work as expected with Opera 12 16  Firefox 18 0 and Google Chrome 28 0 15   See fiddle http   jsfiddle net F68Le  for a complete example with a popup multilevel menu

User · Answer

For me  if I want to interact with the hidden div without seeing it disappear each time I leave the triggering element  a in that case  I must add   div hover       display  block

User · Answer

The   allow  select  only first not nested element   the  gt  select nested elements only - the better is to use   which allow to select arbitrary element which is child of parent hovered element  Using opacity width and transition you can provide smooth appear   x000D   x000D  div   transition  all 1s   x000D   ccc   ggg   opacity  0  color  red  x000D   ccc   height  0   x000D   x000D   aaa hover    bbb  ccc   opacity  1  height  34px   x000D   aaa hover    eee  fff  ggg   opacity  1   x000D   lt div class  aaa  gt Hover me    to see lt br gt  lt br gt   lt  div gt  x000D   x000D   lt div class  bbb  gt BBBBB x000D     lt div class  ccc  gt CCCCC x000D       lt div class  ddd  gt DDDDD lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  eee  gt EEEEE x000D     lt div class  fff  gt FFFFF x000D       lt div class  ggg  gt GGGGG lt  div gt  x000D       lt div class  hhh  gt HHHHH lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I m by know means an expert  but I m incredibly proud of myself for having worked something out about this code  If you do   div       display  none     a hover  gt  div       display  block        Note the      You can contain the whole thing in an a tag  then  as long as your trigger  which can be in it s own div  or straight up in the a tag  or anything you want  is physically touching the revealed div  you can move your mouse from one to the other   Maybe this isn t useful for a great deal  but I had to set my revealed div to overflow  auto  so sometimes it had scroll bars  which couldn t be used as soon as you move away from the div   In fact  after finally working out how to make the revealed div   although it is now a child of the trigger  not a sibling   sit behind the trigger  in terms of z-index   with a little help from this page  How to get a parent element to appear above child  you don t even have to roll over the revealed div to scroll it  just stay hovering over the trigger and use your wheel  or whatever   My revealed div covers most of the page  so this technique makes it a lot more permanent  rather than the screen flashing from one state to another with every move of the mouse  It s really intuitive actually  hence why I m really quite proud of myself   The only downside is that you can t put links within the whole thing  but you can use the whole thing as one big link

User · Answer

Don t forget  if you are trying to hover around an image  you have to put it around a container   css    brand hover    brand-sales       display  block      brand-sales       display  none      If you hover on this    lt span className  brand  gt      lt img src  https   murmure me wp-content uploads 2017 10 nike-square-1900x1900 jpg        alt some image class  product-card-place-logo   gt   lt  span gt    This will show    lt div class  product-card-sales-container brand-sales  gt       lt div class  product-card-  gt Message from the business goes here  They can talk alot or not lt  div gt   lt  div gt

User · Answer

From my testing using this CSS      expandable  display  none     expand hover  expandable  display inline  important     expandable hover  display inline  important      And this HTML    lt div class  expand  gt expand lt  div gt   lt div class  expand  gt expand lt  div gt   lt div class  expandable  gt expandable lt  div gt      it resulted that it does expand using the second   but does not expand using the first one  So if there is a div between the hover target and the hidden div  then it will not work

User · Answer

HTML   lt div gt       lt h4 gt Show content lt  h4 gt   lt  div gt   lt div gt     lt p gt Hello World lt  p gt   lt  div gt    CSS   div div       display  none       div hover  div      display  block       CodePen  hover on div show text in another div

User · Answer

x000D   x000D   showme   x000D    display  none  x000D    x000D   x000D   showhim hover  showme   x000D    display  block  x000D    x000D   lt div class  showhim  gt HOVER ME x000D     lt div class  showme  gt hai lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    jsfiddle  Since this answer is popular I think a small explanation is needed  Using this method when you hover on the internal element  it wont disappear  Because the  showme is inside  showhim it will not disappear when you move your mouse between the two lines of text  or whatever it is     These are example of quirqs you need to take care of when implementing such behavior   It all depends what you need this for  This method is better for a menu style scenario  while Yi Jiang s is better for tooltips

User · Answer

You can do something like this    x000D   x000D  div   x000D      display  none  x000D    x000D       x000D  a hover   div   x000D      display  block  x000D    x000D   lt a gt Hover over me  lt  a gt  x000D   lt div gt Stuff shown on hover lt  div gt  x000D   x000D   x000D    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

User · Answer

Based on the main answer  this is an example  useful to display an information tooltip when clicking on a   near a link    x000D   x000D  document onclick   function     document getElementById  tooltip   style display    none      x000D   x000D  document getElementById  tooltip   onclick   function e    e stopPropagation      x000D   x000D  document getElementById  help   onclick   function e    document getElementById  tooltip   style display    block   x000D  e stopPropagation       x000D   help   opacity  0  margin-left  0 1em  padding  0 4em    x000D       x000D  a hover    help   help hover   opacity  0 5  cursor  pointer    x000D   x000D   tooltip   border  1px solid black  display  none  padding  0 75em  width  50   text-align  center  font-family  sans-serif  font-size 0 8em    x000D   lt a href    gt Delete all obsolete informations lt  a gt  lt span id  help  gt   lt  span gt  x000D   lt div id  tooltip  gt All data older than 2 weeks will be deleted  lt  div gt  x000D   x000D   x000D

User · Answer

I found using opacity is better  it allows you to add css3 transitions to make a nice finished hover effect  The transitions will just be dropped by older IE browsers  so it degrades gracefully to    x000D   x000D   stuff   x000D      opacity  0 0  x000D      -webkit-transition  all 500ms ease-in-out  x000D      -moz-transition  all 500ms ease-in-out  x000D      -ms-transition  all 500ms ease-in-out  x000D      -o-transition  all 500ms ease-in-out  x000D      transition  all 500ms ease-in-out  x000D    x000D   hover   x000D      width 80px  x000D      height 20px  x000D      background-color green  x000D      margin-bottom 15px  x000D    x000D   hover hover    stuff   x000D      opacity  1 0  x000D    x000D   lt div id  hover  gt Hover lt  div gt  x000D   lt div id  stuff  gt stuff lt  div gt  x000D   x000D   x000D

User · Answer

please test this code   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt    lt style type  text css  gt   div   display none  color black width 100px  height 100px  background white  animation myfirst 9s  -moz-animation myfirst 9s     Firefox    -webkit-animation myfirst 5s     Safari and Chrome           keyframes myfirst   0     background blue   25    background yellow   50    background blue   100   background green        -moz-keyframes myfirst    Firefox      0     background white   50    background blue   100   background green       -webkit-keyframes myfirst    Safari and Chrome        0     background red     25    background yellow     50    background blue     100   background green      a hover   div  display inline      lt  style gt   lt  head gt   lt body gt   lt a href     gt Hover over me  lt  a gt   lt div gt the color is changing now lt  div gt   lt div gt  lt  div gt   lt  body gt   lt  html gt

[css] Using only CSS, show div on hover over <a>

Examples related to css