マウスがホバーしたときにテキストを半透明にしたい
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>