Search code examples
csshtmlhoverblock

show div when mouse over

How can I make a link that appears when the mouse is over the main area like a youtube comment.

I have this code - but when the mouse is over the .showme class it's not visible like the showhim element.

<div class="showhim">HOVER ME<div class="showme">hai</div></div>

.showme{ 
display: none;
}
.showhim:hover .showme{
display : block;
}
Solution

  • Maybe you want the inner div to be in the flow of the outer. In that case use

    .showhim:hover .showme{
    display : inline-block;
}

    Or, if you want to display the inner div on :hover for the inner div too, use

    showme{ 
    visibility: hidden;
}
.showhim:hover .showme{
    visibility: visible;
}

    Just one thing: Maybe you tested with IE 6. The dirty one from Redmond doesn't know :hover on elements other than <a/>. He doesn't know display: inline-block either by the way.