我的问题是,当我将鼠标悬停在我的div上时,它不会将链接颜色更改为我想要的颜色。它只是保持默认的黑色。
如何制作它,以便当我将鼠标悬停在缩略图 - 投币器div上时,它会改变链接的颜色?
<div class="thumbnail-container">
<a href="">Text Here</a>
</div>
CSS:
a {
color: #000000;
text-decoration: none;
}
a:hover,
a:focus {
color: #005580;
text-decoration: underline;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
float: left;
}
.thumbnail-container:hover {
color: #0088cc;
}
答案 0 :(得分:6)
问题是选择器特异性。也选择锚点:
.thumbnail-container:hover,
.thumbnail-container:hover a {
color: #0088cc;
}
或者根据您的需要,您可以使用inherit
。只需添加:
.thumbnail-container a {
color:inherit;
}
答案 1 :(得分:4)
.thumbnail-container:hover a {
color: #0088cc;
}