人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

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つの記事の透明度を下げる */
.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本執筆しました！！！