CSSでホバー要素以外にエフェクトを加える方法

  • Posted on
  • Category : Tips
CSSでホバー要素以外にエフェクトを加える方法

よくあるホバーエフェクトはホバーしたその要素自体に透過やカラー変更といったエフェクトを適用したりするものが多いですが、そうではなくホバーした要素以外にエフェクトを加える方法です。これまでこういった動きを実装する場合はJavaScriptを利用していたのですが、簡易的なものであればCSSだけでも十分実装できると思ったので、その方法を備忘録兼ねて紹介します。

今回は例として簡易的なナビゲーションに実装してみる方法で、動きとしてはホバーした要素(ナビ)は特に変化せずに、ホバーした要素(ナビ)以外が透過されるというものを作ってみます。
まず、HTMLは以下のようにulliを使ったよくあるマークアップを利用します。

html

<ul>
	<li><a href="#">nav</a></li>
	<li><a href="#">nav</a></li>
	<li><a href="#">nav</a></li>
	<li><a href="#">nav</a></li>
	<li><a href="#">nav</a></li>
</ul>

次にCSSを下記のように記述し、特に重要なのは赤文字で表示させている部分になります。
いろいろ記述されてはいますが赤文字以外は見た目に関する記述になり、それらは実装箇所に併せて書き換えてもらって問題ないです。

CSS

ul {
	display: flex;
	margin: 0;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	list-style: none;
}
ul li {
	width: 20%;
}
ul li:not(:first-child) {
	border-left: 1px solid #ccc;
}
ul li a {
	display: block;
	padding: 1em 3.5em;
	color: #333;
	font: 400 18px/1 'Open Sans', sans-serif;
	text-decoration: none;
	text-align: center;
}
ul:hover li a {
	opacity: .3;
}
ul li a:hover {
	opacity: 1;
}

簡単にですが動きについて説明をすると、まず:hover擬似クラスを用いた指定をa要素ではなく、ul:hover li aというようにulに対して記述し、今回はサンプルとしてホバーした要素(ナビ)以外が透過されるという動きを実装したいのでopacity: .3;を指定しておきます。
この時点で見栄えを確認してもらうと、ナビゲーションにホバーするとすべての要素(ナビ)が透過されているのをひとまず確認できると思います。

次に現在ホバーしている要素(ナビ)は特に変化させない処理を加えていきます。
これについては:hover擬似クラスを用いたa要素に対して記述していき、今回のサンプルでは「変化させない=透過させない」ということになるので、この部分に関してはopacity: 1;を指定しておきます。

上記記述後に表示確認してもらえれば、ホバーした要素(ナビ)は特に変化せずに、ホバーした要素(ナビ)以外が透過されるという動きが実装されているのを確認できると思います。
ちなみに、透過する際の動きをふわっとさせたい時はCSSのul li aの部分にtransitionを追記してもらえれば実装でき、少しいじれば透過だけでなくカラー変更や文字サイズの変更といったことももちろん可能になります。

実際の動きは以下デモで確認でき、デモでは上で少し触れたtransitionを利用してふわっと透過される動きにしています、

※動きの確認についてはPC環境で確認してください。

:not()を利用する

上でこの動きの実装に重要なのは赤文字で表示させている部分としていましたが、その部分を下記のように:not()を用いて記述すればよりシンプルにすることができます。

CSS

ul:hover li a:not(:hover) {
	opacity: .3;
}

上のデモと動きは変わりませんが、:not()を利用した際の実際の動きは以下デモで確認できます。

※動きの確認についてはPC環境で確認してください。

Back to Top

CSSでホバー要素以外にエフェクトを加える方法

CSSでホバー要素以外にエフェクトを加える方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。