5000164 is here
2014-01-22

hoverした要素に好きなようにハイライトをかける

リンクとかをホバーしたら背景色を変えたりしますよね

リンクをホバーしたら文字色と背景色が変わるという実装はよくあります。

このコンテンツはクリッカブルですよ、と知らせるためですね。

でもリンクの中に画像が含まれている時は画像だけ変わらなかったりします。

これはちょっと違和感です。

そこですべてに覆いかぶさっているように見せます。

まずはデモをどうぞ

See the Pen hoverした要素の上に色をかぶせる by SUGAWARA Hiroshi (@5000164) on CodePen.

1
2
3
4
5
6
7
8
9
<h1>
  実装の解説です
</h1>

<p>
  非常に簡単です。<br /> 今までhoverの擬似クラスにしていた部分をhoverの擬似クラスのafter擬似要素にします。<br /> 文章だとちょっとわかりづらいのでコードで書くと、
</p>

<pre class="brush: css; title: ; notranslate" title="">

a:hover { ・・・ }

1
2
3
4
5
<p>
  これを
</p>

<pre class="brush: css; title: ; notranslate" title="">

a:hover::after { ・・・ }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<p>
  こうします。<br /> あとはちょっと装飾してやれば簡単に実現できます。
</p>

<h1>
  まとめ
</h1>

<p>
  hoverした時に画像にハイライトがついていないのが個人的にすごく気になっていたので、簡単に実装できてよかったです。<br /> ちょっと応用すれば他のこともできそうですね。
</p>