【问题标题】:Change link color on div hover更改 div 悬停时的链接颜色
【发布时间】:2013-05-11 12:41:43
【问题描述】:

我的问题是,当我将鼠标悬停在我的 div 上时,它不会将链接颜色更改为我想要的颜色。它只是保持默认的黑色。

我怎样才能使当我将鼠标悬停在 thumbnail-cointainer 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;
}

【问题讨论】:

标签: html css twitter-bootstrap


【解决方案1】:

问题在于选择器的特异性。也选择锚点:

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

或者根据您的需要,您可以使用inherit。只需添加以下内容:

.thumbnail-container a {
  color:inherit;
}

【讨论】:

  • 但是当您将光标放在容器 div 中的任何位置时,这会改变链接的颜色,这不是通常需要的。如果我将缩略图悬停在容器 div 中的任何位置,我需要将链接变为蓝色。
  • 没关系,我自己已经想通了。不过,谢谢。
【解决方案2】:
.thumbnail-container:hover a {
    color: #0088cc;
}

【讨论】:

    猜你喜欢
    • 2016-05-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-05
    相关资源
    最近更新 更多