show hidden div I when hover over it

Question

I have a hidden div, as in it has the property: display:none . I need to show it when I hover it and not another element, which means, I want it to appear, or display:block as soon as I hover over IT. I have found questions where they are working on the case where you show the div when you hover on the div containing that hidden div: Show hidden div on hover

HTML

<a href="#" id="case1"><div>my hidden div</div></a>

CSS

#case1{
    display: none;
}

If you could give me a bonus and answer this related question as well i'd be thankful:

I have hidden div, that I want to show when I hover over a seperate a href link. but for some reason it is not working:

HTML

<nav>
        <ul id="pics">
          <li><a href="#"><img src="img1"></a></li>
          <!--other <li>-->
        </ul>
        <ul id="menu">
          <li><a href="#">show img1</a></li>
          <!--other <li>-->
        </ul>
</nav>

I want to hide img1 and show it when I hover on the a href that says show img1.

All help is really appreciated. Thanks

Answer 1

The display: none property removes the element from the flow. In other words, it's not there at all so you can't click it, hover over it, etc.

If you want the element to remain in the flow (ie "take up space") but just be invisible, you can use visibility or opacity .

Answer 2

Regarding the first question, well, you cannot hover over an element which is not displayed. (ie display: none )

You may try to set its opacity or visibility to 0 , but not displaying it at all makes it non-hoverable.

You can also combine the opacity: 0 effect with height: 0px (or any other small value), so as to make it smaller and invisible at the same time.

Answer 3

Try using this CSS, the visibility property keeps an elements space while making it invisible, so you can still hover over it!

#case1 {
    visibility: hidden;
}

#case1:hover {
    visibility: visible;
}

Answer 4

For the second part:

$("#menu a").hover(function(){
    $("#pics img").show();
},function(){
    $("#pics img").hide();
});

Demo: http://jsfiddle.net/KYXL4/

Answer 5

You can't hover a hidden element but since it's a child of an anchor you can hover the anchor.

#case1:hover div {display: block;}

Without using an id...

a:hover div {display: block;}