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

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>

- lolalola

Answer 1

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

像这样：

div:hover a {
    color: #FFF;
}

FIDDLE

说明：

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

div a {
    color: red;
}

当您添加 div:hover{} 类时，尽管它比 div a 更具体，但它并不针对链接本身，而是针对链接的容器。

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

然而，由于存在一个将链接颜色设为红色的规则，您需要通过选择器 div:hover a 在悬停时直接针对链接本身进行操作。

- Danield

Answer 2

试试这个：

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

fiddle

- Alex Char

Answer 3

你差不多做对了。如果你需要在鼠标悬停在 div 上时更改链接，你需要这样做：

div:hover a {
    color: red;
}

fiddle here: http://jsbin.com/bipoq/1/

- Brunis

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

- ketan khandagale