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

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

这是DEMO

Answer 3

使用:hover上的div代替a：

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

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

更改div悬停时的链接颜色

3 个答案: