CSSでホバーを使う方法

CSS では、:hover は、マウス ポインターが上にある要素を選択するために使用される疑似クラス セレクターです。 :hover を使用すると、ユーザーが要素の上にマウスを移動したときにスタイルの変更を適用できます。

次の簡単な例は、:hover を使用してリンクの色を変更する方法を示しています:

a {  
  color: blue;  
}  
  
a:hover {  
  color: red;  
}

この例では、ユーザーがリンクの上にマウスを置くと、リンクの色が赤に変わります。マウスオーバーがない場合、リンクの色は青色になります。

色の変更に加えて、:hover を使用して、背景色、境界線のスタイル、フォント サイズなどの他のスタイルの変更を適用することもできます。次に、より複雑な例を示します。

button {  
  background-color: lightgray;  
  border: none;  
  padding: 10px 20px;  
  font-size: 16px;  
}  
  
button:hover {  
  background-color: gray;  
  color: white;  
  border: 2px solid white;  
  font-size: 18px;  
}

この例では、ユーザーがボタンの上にマウスを置くと、ボタンの背景色が灰色に変わり、テキストの色が白に変わり、境界線が白に変わります。フォント サイズは 18 ピクセルに増加します。

以上がCSSでホバーを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。