Question

我有一个块(div)，其中包含带链接的文本。当我将鼠标悬停在此块上时，我需要更改文本颜色（也链接颜色）。 “div:hover” - 此文本颜色已更改，但链接颜色保持不变。

完整代码：

CSS：

a {
    color: #336699;
}
div {
    height: 50px;
    background-color: #FFF;
    color: red;
}
div a {
    color: red;
}
div:hover {
    background-color: #336699;
    color: #FFF;
}

HTML：

<div>
    text test <a href="#">URL</a> text
</div>

Answer 1

您需要明确定位链接以覆盖其颜色。

像这样：

div:hover a {
    color: #FFF;
}

<强> FIDDLE

<强>解释

您最初使用以下链接将链接的颜色设置为红色：

div a {
    color: red;
}

然后添加div:hover{}类 - 虽然它是一个比div a更具体的规则 - 它不会定位链接本身 - 只链接容器

因此，如果没有设置链接颜色的规则 - 那么div:hover{}类将启动并在悬停时将链接设置为白色 - 通过继承。

但是，由于规则会将您的链接设为红色 - 您需要通过选择器div:hover a

在悬停时定位链接本身

Answer 2

试试这个：

div:hover, div:hover a{
            background-color: #336699;
            color: #FFF;
        }

fiddle

Answer 3

你几乎做对了。如果您需要在悬停div时更改链接，则必须执行以下操作：

div:hover a {
    color: red;
}

在这里摆弄：http://jsbin.com/bipoq/1/

Answer 4

试试这个

    <style>
         a{
             color: #336699;
          }
          div{
             height: 50px;
             background-color: #FFF;
             color: red;
          }
          div a{
             color: red;
          }
          div:hover{
             background-color: #336699;
             color: #FFF;

          }
          div:hover a
          {
             color: #FFF;
          }

      </style>
  <div>
text test <a href="#">URL</a> text

CSS：将鼠标悬停在块上以更改文本颜色和链接

4 个答案: