CSS ホバー時に別の要素を変更する方法 - by Takumi HirashimaCSS でマウスホバーした時に、ホバーした要素ではない別の要素にアクション・変更を加える方法を紹介します。 例えば、似たボタンが並んでいる中で、ホバーしたボタン以外を半透明にしたい時などに便利な方法です。 擬似クラスの hover を使った方法 擬似クラス :hover を使った方法 否定疑似クラス :not を使った方法 自動開閉のアコーディオン風メニューの実装方法 擬似要素 :hover の組み合わせで実装する方法 この手のアクションは jquery などで実装しがちですが、CSSだけで実装が可能です。 この投稿では hover を使った方法や :not を使った方法を紹介します。 擬似クラス :hover を使った方法 まずは ：hover の組み合わせで実装する方法を紹介します。 ベースの HTML は次の通りです。 <ul> <li>あああああ</li> <li>いいいいい</l
