css - 更改 div 悬停时的链接颜色

Question

悬停 div 时如何更改链接颜色？

我尝试使用：

#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;
}

但这不起作用，只有当我将鼠标悬停在链接上时才会改变颜色。

Answer 1

添加这个：

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

Answer 2

您想在 div 上设置悬停事件，而不是链接..

#voltarTEST a:hover应该#voltarTEST:hover a

第一个（你有它的方式）说当voltarTESTdiv 内的链接悬停时。第二个说在悬停voltarTEST时将此样式应用于内部链接。voltarTEST

这是一个演示

Answer 3

使用:hoverondiv代替a：

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

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