home > blog > css > hoverした要素以外にhoverを指定する方法

hoverした要素以外にhoverを指定する方法

完成形はこのようになります

HTMLの記述はこちら

<ul id="sampleBox_210213">
<li><a href="#"><img src="../images/common/sample_bg01.JPG" alt=""></a></li>
<li><a href="#"><img src="../images/common/sample_bg01.JPG" alt=""></a></li>
<li><a href="#"><img src="../images/common/sample_bg01.JPG" alt=""></a></li>
<li><a href="#"><img src="../images/common/sample_bg01.JPG" alt=""></a></li>
<li><a href="#"><img src="../images/common/sample_bg01.JPG" alt=""></a></li>
<li><a href="#"><img src="../images/common/sample_bg01.JPG" alt=""></a></li>
</ul>

CSSの記述はこちら

▼ パソコン

#sampleBox_210213 {
display: flex;
flex-wrap: wrap;
}

/*
「ulがhover」した時に発火。
「hoverされていないli」の「aのbefore」のcss。
*/
#sampleBox_210213:hover li:not(:hover) a:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

#sampleBox_210213 li {
width: calc(96% / 3);
}

/*
「３の倍数以外のli」に適応されるcss
*/
#sampleBox_210213 li:not(:nth-child(3n)) {
margin-right: 2%;
}

/*
「４つ目のli」から適応されるcss
*/
#sampleBox_210213 li:nth-child(n+4) {
margin-top: 2%;
}

#sampleBox_210213 li a {
display: block;
position: relative;
}

/*ゆっくり暗くする*/
#sampleBox_210213 li a:before {
content: "";
transition: ease .3s;
}

解説はこちら

ポイントは２つになります。

  1. ulがhoverした時に画像を暗くする
  2. 「:not(:hover)」でhoverしていない要素を指定

「ul」がhoverした時に画像が暗くなるのは、ulの中にある「hoverされていないli」の「aのbefore」のcssで設定。
contentとabsoluteは忘れずに設定してください。

hoverして画像が明るくなるのは、「hoverされていないli」の「aのbefore」のcssが解除されるためです。

RETURN
top