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

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

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

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

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

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

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

まずはデモをどうぞ

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

実装の解説です

  非常に簡単です。

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

a:hover {
・・・
}

これを

a:hover::after {
・・・
}
  こうします。

あとはちょっと装飾してやれば簡単に実現できます。

まとめ

  hoverした時に画像にハイライトがついていないのが個人的にすごく気になっていたので、簡単に実装できてよかったです。

ちょっと応用すれば他のこともできそうですね。

Author
菅原 浩
Web プログラマー。好きな言葉は「安定的に不安定」。オーストラリアで英語を勉強した後に、現在デンマークで幸せについて考えている。
Next Post
HTC J One HTL22では絵文字が表示されないので簡単な対処法を見つけた
Previous Post
自分を紹介するポートフォリオサイトを作った
Recent Posts
Electron と Scala.js と scalajs-react と ScalaCSS を使ってアプリを作った時のログ
Scala で Flyway と Slick を使って codegen した時のログ
自分とは連続した情報であると定義する
本「リモートチームでうまくいく」の感想
映画「Whiplash」の感想