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

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

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

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するとすべての要素（ナビ）が透過されているのをひとまず確認できると思います。

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

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

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

:not()を利用する

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

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

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