CODEWITHSUNDEEP
csshtmlhovervisibility
zahi daoui
zahi daoui

Reputation: 267

show hidden div I when hover over it

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

Upvotes: 2

Views: 2193

Answers (5)

John
John

Reputation: 13719

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;}

Upvotes: 0

Mahmood Dehghan
Mahmood Dehghan

Reputation: 8265

For the second part:

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

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

Upvotes: 1

mheisig
mheisig

Reputation: 155

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 (i.e. "take up space") but just be invisible, you can use visibility or opacity.

Upvotes: 3

MrHunter
MrHunter

Reputation: 1900

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;
}

Upvotes: 1

user2699477
user2699477

Reputation:

Regarding the first question, well, you cannot hover over an element which is not displayed. (i.e. 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.

Upvotes: 1

Related Questions