CSSでホバーした要素以外の兄弟要素にスタイルを指定する方法

ブログの記事一覧などのカードにホバーした時に、そのカードだけを目立たせるために他の要素を薄く表示する方法を紹介します。CSSだけでできるので、jQueryなども必要ありません。

 

HTMLとCSS

ブログカードを<article>タグで囲って、その中は<a>タグでリンクにします。

HTML

<div class="posts">
  <article class="posts-item">
    <a href="">
      ...
    </a>
  </article>
  <article class="posts-item">
    <a href="">
      ...
    </a>
  </article>
  ...
</div>

 

記事は3列の横並びとします。

CSS

* {
  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;
}

 

ホバーした要素以外にCSSを適用する

記事一覧のブロックをホバーしたときは全ての記事の透明度を一度下げます。

その後特定の記事のカードにホバーしたときだけ、そのカードの透明度を元に戻します。

.posts:hover > .posts-item {
  opacity: .7;
}
.posts > .posts-item:hover {
  opacity: 1;
}

 

しかし、このままではカード間の溝にマウスがホバーした場合にもスタイルが適用されてしまいます。

この理由は「.post-item」の部分に「padding」を指定してみじを作っているからですね。

なのでこれを解消するために「padding」にホバーした場合はスタイルを無効にしましょう。

 

溝はスタイルを無効にする

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

 

<a>タグだけにホバー効果が適用されるようにし、それ以外の場合は「visibility: hidden」を使って非表示にします。