Perl Web開発者のHTML・CSS入門

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

マウスオーバーしたときに背景を光らせるには、a:hoverのbackgroundに、少し明るい色を設定します。

<style>
  .mouse-over-light a {
    color:white;
    padding:10px;
  　width:100%;
    background:#2E75B6;
  }
  .mouse-over-light a:hover {
    background:#3E85C6;
  }
</style>

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

少し明るい色を作るには?

少し明るい色を作るには、RGB(Red, Green, Blue)のそれぞれの要素に一番上の桁に1を加えます。RGB表示は、16進数なので、9の次はAになります。

#2E75B6;

2EがR、75がG、B6がBなので、一番上の桁に1を足すと以下になります。

#3E85C6

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

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

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