div にカーソルを合わせると、div 内のリンクだけが色を変えるのはなぜですか?

カーソルを合わせたときに Div 全体の背景色を変更する方法

マウスを上に置いたときに div の背景色を変更しようとしていますそれ。ただし、div 内のリンクだけが色を変えていることに気づきました。

問題の原因

特別に定義した「a:hover」CSS ルール をターゲットとします。 div内の要素。このルールは、マウス ホバー時のリンク要素のみを変更します。

解決策

div 全体の背景色を変更するには、ホバー ルールを div に適用する必要があります。自体。 CSS の「a:hover」を「div:hover」に置き換えます。以下に例を示します。

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

Div 全体をクリック可能にする

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 中国語 Web サイトの他の関連記事を参照してください。