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>

Answer 1

您需要明確定位鏈接以覆蓋其顏色。

像這樣：

div:hover a {
    color: #FFF;
}

小提琴

說明：

您最初將鏈接的顏色設置為紅色：

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

小提琴

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