当鼠标悬停在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;
}

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

- Astronaut

---

请提供 div 的名称或粘贴 HTML 代码。 - SVS

一个 jsFiddle 总是很方便，它直接展示了你目前拥有的（而且很容易修改它）。 - Styxxy

Answer 1

添加这个：

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

- SVS

---

谢谢，那真是个愚蠢的错误哈哈。 - Astronaut

Answer 2

您要在 div 上设置 hover 事件，而不是链接。#voltarTEST a:hover 应该改为 #voltarTEST:hover a。

第一种写法（您原本的方式）是指当鼠标悬停在 voltarTEST div 中的链接上时。第二种写法是指当鼠标悬停在 voltarTEST 内部时，将此样式应用于链接。

这里有一个演示： DEMO

- sachleen

Answer 3

使用 :hover 在 div 上而不是在 a 上：

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

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

- zessx