CODEWITHSUNDEEP
htmlcssopacity
lunr
lunr

Reputation: 5269

setting opacity with css :hover doesn't work for child element

I am trying to make a link appear when the mouse is hovered above a div, but i can't get it to work.

HTML:

<div class="rendezvous" style="position: relative">
    <img src="http://placehold.it/50x50" />
    <div class="remover" style="width: 32px; position: absolute; top: 0px; left: 15px; opacity: 0;">
        <a href="#">Link</a>
    </div> 
</div>

CSS:

.rendezvous:hover .remover {
    opacity: 0.5;
}

JSFiddle: http://jsfiddle.net/6uLTr/

The curious thing is that the css selector works, i can test it by setting the border for example. But the same method doesn't work when i set the opacity. What am i doing wrong here?

Upvotes: 1

Views: 1526

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

rules in the style attribute have higher precedence than rules defined in author stylesheets. You can either use opacity: 0.5 !important (not the best idea) or define the other rules in the stylesheet as well.

http://jsfiddle.net/6uLTr/1/

Upvotes: 3

Related Questions