CODEWITHSUNDEEP
htmlcss
PonyTerrance
PonyTerrance

Reputation: 47

CSS class not being selected

I have made a div that when you rollover it, a second div should be displayed with content in it.

HTML:

<div id="nav">
    <img src="" width="80" height="80" style="background-color: #666666">
    <div class="hover">la</div>
</div>

CSS:

#nav {
    height:80px;
    width:80px;
    background-color:red;
    padding:0;
    margin:0;
    position: relative;
} 

#nav .hover {
background: #f8f8f8; 
    height: auto; width: 800px;
    position: absolute; 
    left: 50%; 
    visibility:hidden;
    margin: -10px 0px 0px -400px; 
    padding: 10px; 
    display: block;
    border: 1px solid #afafaf;  
    box-shadow: 0 5px 20px -2px #444;
    border-top-left-radius: 7px; 
    border-bottom-right-radius: 7px;
}

#nav:hover > #nav .hover {   <---
    visibility:visible;
}

My problem is the class isn't selected and won't display when rolled over (the class of which I am talking about is marked <---)

Whats supposed to happen: You roll over the grey square anda blue line pops up

What actually happens: You roll over it at nothing happens

Please advise.

JS Fiddle: http://jsfiddle.net/5cLuL/

Upvotes: 2

Views: 81

Answers (2)

bestprogrammerintheworld
bestprogrammerintheworld

Reputation: 5520

If you have this html...

<div id="nav">
    <img src="" width="80" height="80" style="background-color: #666666">
    <div class="hover">la</div>
</div>

and you have this in your css:

#nav:hover > #nav .hover

...when hover occurs on the #nav-element, it applies style to child of the #nav, but #nav within it, therefore your code does not work.

It would work with html like this:

<div id="nav">
    <div id="nav">
        <img src="" width="80" height="80" style="background-color: #666666">
        <div class="hover">la</div>
    </div>
</div>

but above is not valid html.

With this css...

#nav:hover > .hover {
    visibility:visible;
}

...when hovering the #nav it makes the child of #nav that has class .hover visible.

Upvotes: 1

Josef E.
Josef E.

Reputation: 2219

Change to this and your fine 

   #nav:hover > .hover {
        visibility:visible;
    }

Upvotes: 0

Related Questions