CODEWITHSUNDEEP
css
Astronaut
Astronaut

Reputation: 7031

Change link color on div hover

How do I change my link colors when I hover a div?

I tried to use:

#voltarTEST {
    width: 80px;
    height: 62px;
    padding-top: 16px;
    background-image: url(../img/multiLangImage/Seta11.png);
    background-repeat: no-repeat;
}
#seguinteBtn {
    width: 80px;
    height: 62px;
    padding-top: 16px;
    background-image: url(../img/multiLangImage/Seta21.png);
    background-repeat: no-repeat;
    text-decoration: none;
    color: #777;
}
#seguinteBtn:hover {
    background-image: url(../img/multiLangImage/Seta22.png);
    background-repeat: no-repeat;
    text-decoration: none;
    color: #FFF;
}
#voltarText {
/*  padding-right: 10px;*/
    padding-left: 30px;
}
#voltarNEText {
/*  padding-right: 10px;*/
    padding-left: 30px;
}
#voltarTEST:hover {
    background-image: url(../img/multiLangImage/Seta12.png);
    background-repeat: no-repeat;
}
#voltarTEST a {
    text-decoration: none;
    font-size: x-small;
    font-family: Verdana;
    text-decoration: none;
    color: #999;
}
#voltarTEST a:hover {
    text-decoration: none;
    font-size: x-small;
    font-family: Verdana;
    text-decoration: none;
    color: #FFF;
}
#dataUltimaSincMSG {
    margin-bottom: 0;
}
#estadoSinc {
    margin-bottom: 0;
}

But that did not work, this only changes color when I hover over the link.

Upvotes: 13

Views: 43685

Answers (3)

sachleen
sachleen

Reputation: 31131

You want to set the hover event on the div, not the link..

#voltarTEST a:hover should be #voltarTEST:hover a

The first (the way you had it) says when the link inside of the voltarTEST div is hovered on. The second says apply this style to links inside voltarTEST when voltarTEST is hovered on.

Here's a DEMO

Upvotes: 9

zessx
zessx

Reputation: 68790

Use the :hover on the div instead of the a : 

#voltarTEST:hover a{
    text-decoration: none;
    font-size: x-small;
    font-family: Verdana;

    text-decoration: none;
    color:#FFF;
}

Upvotes: 2

SVS
SVS

Reputation: 4275

Add this:

#voltarTEST:hover a{
    text-decoration: none;
    font-size: x-small;
    font-family: Verdana;
    text-decoration: none;
    color:#FFF;
}

Upvotes: 36

Related Questions