CODEWITHSUNDEEP
htmlcsshoveropacity
Burak Özmen
Burak Özmen

Reputation: 873

Decreasing opacity on hover

I have three divs in a tag.

<nav>
    <div id="home">
        <p>Home</p>
    </div>
    <div id="about">
        <p>About Me</p>
    </div>
    <div id="contact">
        <p>Contact</p>
    </div>
</nav>

I want to make 3 buttons which changes its opacity to 1 when hovered, but i end up unsuccessful. Firstly, I declared nav's opacity as 0.3, and then set it's opacity to 1 when hovered. But it stays as 0.3 when hovered. I thought :hover pseudo-selectors are more specisic, so they would overwrite the old value, but they didnt. Here is the CSS code:

#home, #about, #contact {
    text-align: center;
    color: #eedd33;
    display: inherit;
    padding-top: 0px;
    font-family: Tahoma;
    border-right: solid 1px black;
    height: 50px;
    vertical-align: middle;
    padding: 10px;
}



#home:hover, #about:hover, #contact:hover {
    opacity: 1;
} 

nav {
    border: solid 2px black;
    display: inline-block;
    background: orange;
    border-radius: 7px;
    opacity: 0.3;
}

I can post images indicating my problem if you want it.

Upvotes: 0

Views: 1507

Answers (2)

ricardohdz
ricardohdz

Reputation: 579

Just create a generic class for each of the inner divs or change the CSS selector to something like this:

nav > #home:hover,
nav > #about:hover,
nav > #contact:hover {
    opacity: 1;
}

Heres the JSFiddle http://jsfiddle.net/rZgzL/

Upvotes: 0

Elmar Peise
Elmar Peise

Reputation: 15483

The nav's opacity is inherited by the children. Even if their's is 1 they will only show 0.3 opacity. Define the opacity of the children to be 0.3 instead.

Upvotes: 3

Related Questions