hover on a div changing text and background image

StackOverflow https://stackoverflow.com/questions/21465428

Question

I'm trying with css to change the background image of a div and the color of at text when hover a div containing the text and the background image... it works but with some issues...

when hover the div #fancy_hover, the background image changes, and the text color and decoration at the same time... but when hover the text div link inside I have a problem, the background color of my text div disappears, it should stay white... and when hover the text itself, the background of my text becomes grey...

anyone can help with this ?

thanks a lot !

here is the html

<a href="http://rockonbones.com/news">
<div id="fancy_hover">
    <div class="damier_menu">
        <div class="texte">
            <span class="news">news</span>
        </div>
    </div>
</div>
</a>

and the css :

.damier_menu{
    width: 100%;
    height: 100%;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px ;
    -webkit-border-radius: 10px ;
    }
#fancy_hover .texte{
    margin-top: 20px;
    background-color: white!important;
    padding: 5px 0 5px 0;}

#fancy_hover{
    width: 140px;
    height: 105px;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px ;
    -webkit-border-radius: 10px ;
    color: black ;
    background-image: url('http://rockonbones.com/wp-content/uploads/fond_large.png');
    background-size: cover;
    background-repeat: no-repeat;}

#fancy_hover :hover{
    color:#c33!important;
    text-decoration: line-through!important;
    background-image: url('http://rockonbones.com/wp-content/uploads/fond_anim_2.gif')!important;
    background-size: cover;
    background-repeat: no-repeat}

and here is jsfiddle

http://jsfiddle.net/3gGY3/1/

thanks a lot

Was it helpful?

Solution

You have

#fancy_hover :hover { .. }

Did you mean

#fancy_hover:hover { .. }

http://jsfiddle.net/3gGY3/3/

If you put the space before the :hover then it will target all elements' hover state inside of fancy_hover. Which is why you see a background when you hover the text

For line through http://jsfiddle.net/3gGY3/6/

#fancy_hover .news:hover{
    text-decoration: line-through;
}

OTHER TIPS

Your problem is simple - remove the space before the :hover

#fancy_hover:hover{
    color:#c33!important;
    text-decoration: line-through!important;
    background-image: url('http://rockonbones.com/wp-content/uploads/fond_anim_2.gif')!important;
    background-size: cover;
    background-repeat: no-repeat}

See updated fiddle here: http://jsfiddle.net/7SJbx/

A space within an selector means, that you are going to the child-elements. And so you declared the hover-effect for the child, instead of the fancy_hover-Object.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top