文本悬停背景图像宽度100%与兄弟组合符

Question

<div class="section_img">
<span class="section_img_icon" >STYLE</span>
<img src="slide3.jpg" alt="" srcset="" />
</div>

.section_img_icon {
position: absolute;
cursor: pointer;
}
.section_img img {
width: 20%;
height: 100vh;
object-fit: cover;
}
.section_img span:hover ~ .section_img img {
width: 100% !important;
}

你好朋友在听到我想宽度100%的图像与悬停，但它不工作

Answer 1

您需要移除.section_img才能使~操作符的第二部分工作。无论如何，.section_img已经适用于第一部分，因此第二部分不需要它，因为它们需要在~工作的同一父节点中。

当然，100%将只适用于当你悬停的STYLE文本，因为:hover适用于第一部分的操作符。如果这不是您想要的，则需要在问题

中添加详细信息。

.section_img_icon {
position: absolute;
cursor: pointer;
}
.section_img img {
width: 20%;
height: 100vh;
object-fit: cover;
}
.section_img span:hover ~ img {
width: 100% !important;
}

<div class="section_img">
<span class="section_img_icon" >STYLE</span>
<img src="slide3.jpg" alt="" srcset="" />
</div>