マウスがホバーしたときにテキストを半透明にしたい

最終更新日

opacityプロパティは、要素の透明度を設定するのに使います。値には単位なしで0~1の小数を指定します。この値が0のとき要素は完全に透明で見えなくなり、1のとき完全に不透明になります。たとえば、透明度を75%に設定したい場合は、CSSでは「opacity:0.75;」と指定します。

書式

opacity:0.75;

「:hover」セレクタのスタイルにopacityプロパティを追加しておくと、マウスがホバーしたときだけコンテンツを半透明にすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプル</title>
    <style>
      a{
        color: #4fb24b;
      }
      a:hover{
        color: #4fb24b;
        opacity: 0.5;
      }
      
    </style>
</head>
<body>
   <h1>代表的な検索エンジン</h1>
   <ul>
        <li><a href="#">Google</a></li>
        <li><a href="#">MSN</a></li>
    </ul>
</body>
</html>
リンク上にカーソルがない状態
カーソルが当たった状態