【小ネタ】ロールオーバー出来る時にロールオーバーをさせたい

リンクの上にカーソルを持っていくと、ロールオーバーする。これはデスクトップでのリンクやボタンでのお約束になっています。
ですが、このロールオーバーの動作はスマホのようにタッチする端末では使用できません。
逆にタッチした時にロールオーバーの動作を誤動作する事にも繋がります。

この部分をしっかりとしておきたいと思った時は、@mediaを使った振り分けを行うと良いです。

<div class="box">
  <a href="#">押すとロールオーバーするボタン</a>
</div>

.box a {
  background: #333;
  border-radius: 0.5rem;
  color: #fff;
  display: block;
  padding: 1rem;
  text-align: center;
  transition: background 0.5s;
}

@media (hover: hover) {
  .box a:hover {
    background: #e00;
  }
}

ロールオーバーさせたい要素を「@media (hover: hover)」で囲むと
ロールオーバー出来る機器で見たときだけ、ロールオーバーが反応するようになります。
現在、IE以外で使えるテクニックとなっておりますので、これはもう解禁してもいいでしょう。

レスポンシブデザインを作成する場合は使える技となりますので、覚えておくと役に立つと思います。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！