Perl Web開発者のHTML・CSS入門

マウスオーバーしたときに文字を光らせる

マウスオーバーしたときに文字を光らせるには、a:hoverのスタイルに「opacity:不透明度;」を指定します。

透明度が上がると光ったように見えることを利用すると簡単です。不透明度は、0.8くらいから微調整していくのがよいでしょう。

<style>
  .mouse-over-light a:hover {
    opacity:0.8;
  }
</style>

<div class="mouse-over-light">
  <a href="/">ホバーすると光る</a>
</div>

ホバーするときに光らせる効果は?

マウスを上に持って行ったときに、光ると、そこを押せると直観的にわかります。

スマートフォンにおいては、関係がありませんので、この効果は補助的な効果と考えて、見ただけで押せるとわかるデザインを考慮する必要があるでしょう。