CSS 在 div 悬停时更改链接颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11193762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change link color on div hover
提问by Astronaut
How do I change my link colors when I hover a div?
悬停 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.
但这不起作用，只有当我将鼠标悬停在链接上时才会改变颜色。
回答by SVS
Add this:
添加这个：
#voltarTEST:hover a{
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color:#FFF;
}
回答by sachleen
You want to set the hover event on the div, not the link..
您想在 div 上设置悬停事件，而不是链接。
#voltarTEST a:hovershould be #voltarTEST:hover a
#voltarTEST a:hover应该 #voltarTEST:hover a
The first (the way you had it) says when the link inside of the voltarTESTdiv is hovered on. The second says apply this style to links inside voltarTESTwhen voltarTESTis hovered on.
第一个（您拥有它的方式）表示何时将voltarTESTdiv内的链接悬停在上面。第二个说voltarTEST当voltarTEST鼠标悬停在上面时将此样式应用于内部链接。
Here's a DEMO
这是一个演示
回答by zessx
Use the :hoveron the divinstead of the a:
使用:hoverondiv而不是a：
#voltarTEST:hover a{
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color:#FFF;
}
