CODEWITHSUNDEEP
jqueryhtmlcss
boshkash
boshkash

Reputation: 1

I want to display div when hover on anchor tag by css

I want to display div when hover on anchor tag by CSS. This is my code but not working. Also I want to display the div with slow-motion by CSS. 

#shoow {
  display: none;
}
#hoverMe:hover #shoow {
  display: block;
}
<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width: 650px; height: 100px; background-color: blue;"></td>
  </tr>
</table>

Upvotes: 0

Views: 889

Answers (2)

Billy
Billy

Reputation: 2448

you can't do css transitions on the display property as it's either on or off, to make it slower just add more before the s's in thoe transition property.

#shoow {
  . . .
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
#hoverMe:hover + table #shoow{
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}
<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width:650px;height:100px;background-color:blue;"></td>
  </tr>
</table>

Upvotes: 0

j08691
j08691

Reputation: 208032

You need to change your second selector to:

#hoverMe:hover + table #shoow {
  display: block;
}

What you have now, #hoverMe:hover #shoow, tries to look for an element with the ID shoow as a descandant of an element with the ID of hoverMe, which it isn't. However if you use the adjacent sibling selector (+) or the sibling selector (~) it will work.

#shoow {
  display: none;
}
#hoverMe:hover + table #shoow {
  display: block;
}
<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width:650px;height:100px;background-color:blue;"></td>
  </tr>
</table>

Upvotes: 3

Related Questions