在div悬停上更改链接颜色 [英] Change link color on div hover

问题描述

我的问题是，当我悬停在我的div，它不会改变链接的颜色，我想要的是。

My problem is that, when I hover over my div, it doesn't change the links color to what I want it to be. It just stays its default black color.

如何做到这样，当我将鼠标悬停在缩略图cointainer div上时，它会改变链接的颜色？

How can I make it so that when I hover over the thumbnail-cointainer div, it changes the color of the link?

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

推荐答案

问题是选择器的具体性。选择锚点：

The problem is selector specificity. Select the anchor as well:

.thumbnail-container:hover,
.thumbnail-container:hover a {
  color: #0088cc;
}

或者根据您的需要，您可以使用 inherit 。只需添加：

Or depending on what you want you may use inherit. Just add this:

.thumbnail-container a {
  color:inherit;
}

这篇关于在div悬停上更改链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！