當我將滑鼠懸停在 div 上時，為什麼只有 div 內的連結會改變顏色？

如何在滑鼠懸停時更改整個Div 的背景顏色

您正在嘗試在滑鼠懸停時修改div 的背景顏色它。但是，您已經注意到，只有 div 內的連結正在改變顏色。

問題原因

您專門定義的「a:hover」CSS 規則目標是 div 內的元素。此規則僅在滑鼠懸停時修改連結元素。

解

要更改整個 div 的背景顏色，需要將懸停規則套用於該 div本身。將“a:hover”CSS 替換為“div:hover”。以下是範例：

<code class="css">div {
  background: white;
}
div:hover {
  background: gray;
}</code>

讓整個 Div 可點擊

要讓整個 div 可點擊，您可以使用 將其轉換為連結。標籤。將您的 div 內容包含在錨標記內並提供適當的目標 URL。例如：

<code class="html"><a href="https://example.com">
  <div>
    Click Me!
  </div>
</a></code>

附加說明：

• 要將懸停效果應用於特定div，請為其指定一個唯一的id（例如，

div id="myDiv">) 並使用CSS 選擇器"#myDiv:hover {...}"對於一組div，建立一個類(例如，

) 並使用CSS 選擇器".myClass {...}"

以上是當我將滑鼠懸停在 div 上時，為什麼只有 div 內的連結會改變顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！