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-itempadding を指定してガター部分を表現しているからです。

ガター部分はホバーを無効に


.posts {
  visibility: hidden;
}
.posts-item > a {
  visibility: visible;
}

ちょっとしたハックですが、visibility を使って a 要素だけにホバー効果が適用されるようにします。