在文本悬停时，使用兄弟组合器将背景图像的宽度设置为100%。

huangapple
go评论107阅读模式
英文:

On text hover background image width 100% with sibling combinator

问题

Sure, here is the translated code:

  1. <div class="section_img">
  2.     <span class="section_img_icon">STYLE</span>
  3.     <img src="slide3.jpg" alt="" srcset="" />
  4. </div>
  1. .section_img_icon {
  2.   position: absolute;
  3.   cursor: pointer;
  4. }
  5. .section_img img {
  6.   width: 20%;
  7.   height: 100vh;
  8.   object-fit: cover;
  9. }
  11. .section_img span:hover ~ .section_img img {
  12.   width: 100% !important;
  13. }

No other content.

英文: 
  1. &lt;div class=&quot;section_img&quot;&gt;
  2.     &lt;span class=&quot;section_img_icon&quot; &gt;STYLE&lt;/span&gt;
  3.     &lt;img src=&quot;slide3.jpg&quot; alt=&quot;&quot; srcset=&quot;&quot; /&gt;
  4.   &lt;/div&gt;
  1. .section_img_icon {
  2.   position: absolute;
  3.   cursor: pointer;
  4. }
  5. .section_img img {
  6.   width: 20%;
  7.   height: 100vh;
  8.   object-fit: cover;
  9. }
  11. .section_img span:hover ~ .section_img img {
  12.   width: 100% !important;
  13. }

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 -->

  1. .section_img_icon {
  2.   position: absolute;
  3.   cursor: pointer;
  4. }
  5. .section_img img {
  6.   width: 20%;
  7.   height: 100vh;
  8.   object-fit: cover;
  9. }
  11. .section_img span:hover ~ img {
  12.   width: 100% !important;
  13. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;section_img&quot;&gt;
  2.     &lt;span class=&quot;section_img_icon&quot; &gt;STYLE&lt;/span&gt;
  3.     &lt;img src=&quot;slide3.jpg&quot; alt=&quot;&quot; srcset=&quot;&quot; /&gt;
  4.   &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月6日 23:17:36
  • 转载请务必保留本文链接：https://go.coder-hub.com/75951139.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定