英文:
On text hover background image width 100% with sibling combinator
问题
Sure, here is the translated code:
<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;
}
No other content.
英文:
<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;
}
Hi Friends
In hear i want to width 100% image with hover but it is not working
答案1
得分: 0
你需要移除.section_img，以便~运算符的第二部分起作用。.section_img已经适用于第一部分，因此对于第二部分来说是不必要的，因为它们需要在同一父级中才能使用~。
当你悬停在STYLE文本上时，100%的效果只会应用在那一部分，因为:hover只适用于运算符的第一部分。如果这不是你的意图，你需要对问题进行详细说明。
英文:
You need to remove .section_img for the second part of the ~ operator to work. The .section_img already applies to the first part anyway, so it's not needed for the second, as they need to be in the same parent for ~ to work.
Of course the 100% will only apply when you hover the STYLE text, because :hover applies to the first part of the operator. If this is not what you intended, you need to add details to the question
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="section_img">
<span class="section_img_icon" >STYLE</span>
<img src="slide3.jpg" alt="" srcset="" />
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论