CSSでホバーしたもの以外の兄弟要素を暗くしたりスタイルを適用する
記事一覧などでホバーしたものを目立たせるためにそれ以外の記事一覧を薄く表示してみます。JSを使わなくてもCSSだけでできるので紹介します。
基本構成
<div class="posts">
<article class="posts-item">
<a href="">
...
</a>
</article>
<article class="posts-item">
<a href="">
...
</a>
</article>
...
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.posts {
margin: -1.7em -1.5em 0 0;
}
.posts-item {
float: left;
width: 33.33333%;
padding: 1.7em 1.5em 0 0;
}
.posts-item > a {
display: block;
}
3列並びの記事一覧を想定しています。
ホバーしたもの以外にCSSを適用
/* 記事一覧をホバーしたときに、1つ1つの記事の透明度を下げる */
.posts:hover > .posts-item {
opacity: .7;
}
/* 1つの記事をホバーしたとき、透明度を元に戻す */
.posts > .posts-item:hover {
opacity: 1;
}

しかし1つだけ問題があり、このままだとガター(溝)の部分にマウスを持っていってもホバー効果が出てしまいます。これは、.posts-item
に padding
を指定してガター部分を表現しているからです。
ガター部分はホバーを無効に
.posts {
visibility: hidden;
}
.posts-item > a {
visibility: visible;
}
ちょっとしたハックですが、visibility
を使って a
要素だけにホバー効果が適用されるようにします。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs