覆盖文本阻挡了背景图片的过渡。

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

Overlay text is blocking transition of background image

问题

如何阻止叠加文本阻挡背景图的悬停效果？

悬停效果正常运行
(https://i.stack.imgur.com/B5Rkb.jpg)

...只要我不正好悬停在叠加文本上
(https://i.stack.imgur.com/AWFty.jpg)

这是我的 SCSS 代码：

  1. .home__featured-element {
  2.     width: 30%;
  3.     height: 100%;
  4.     position: relative;
  6.     img {
  7.         width: 100%;
  8.         height: 100%;
  9.         object-fit: cover;
  10.         transition: all 0.4s ease-in-out;
  11.         &:hover {
  12.             cursor: pointer;
  13.             filter: brightness(70%);
  14.         }
  15.     }
  16.     
  17.     &::after {
  18.         content: "ADD TO CART";
  19.         position: absolute;
  20.         opacity: 0;
  21.         color: white;
  22.         left: 50%;
  23.         top: 50%;
  24.         transform: translate(-50%, -50%);
  25.     }
  26.     &:hover::after {
  27.         opacity: 1;
  28.     }
  29. }

这是我的 JSX 代码：

  1. <div className="home__featured-products-wrapper">
  2.     <div className="home__featured-element">
  3.         <img src={items[0].imgSrc} />
  4.         <div>{items[0].name}</div>
  5.         <div>${items[0].price}</div>
  6.     </div>
  7.     <div className="home__featured-element">
  8.         <img src={items[4].imgSrc} />
  9.         <div>{items[4].name}</div>
  10.         <div>${items[4].price}</div>
  11.     </div>
  12.     <div className="home__featured-element">
  13.         <img src={items[2].imgSrc} />
  14.         <div>{items[2].name}</div>
  15.         <div>${items[2].price}</div>
  16.     </div>
  17.     <div className="home__featured-element">
  18.         <img src={items[3].imgSrc} />
  19.         <div>{items[3].name}</div>
  20.         <div>${items[3].price}</div>
  21.     </div>
  22. </div>
英文:

How can I stop an overlay text from blocking hover effect of a background image?

Hover effect works just fine
(https://i.stack.imgur.com/B5Rkb.jpg)

...As long as I don't hover exactly on the overlay text
(https://i.stack.imgur.com/AWFty.jpg)

This is my scss code:

  1. .home__featured-element {
  2.          width: 30%;
  3.          height: 100%;
  4.          position: relative;
  6.                 img {
  7.                     width: 100%;
  8.                     height: 100%;
  9.                     object-fit: cover;
  11.                     transition: all 0.4s ease-in-out;
  12.                     &amp;:hover {
  13.                         cursor: pointer;
  14.                         filter: brightness(70%);
  15.                     }
  16.                 }
  17.                 
  18.                 &amp;::after {
  19.                     content: &quot;ADD TO CART&quot;;
  20.                     position: absolute;
  21.                     opacity: 0;
  22.                     color: white;
  23.                     left: 50%;
  24.                     top: 50%;
  25.                     transform: translate(-50%, -50%);
  26.                 }
  27.                 &amp;:hover::after {
  28.                     opacity: 1;
  29.                 }
  30.             }

And this is my jsx code:

  1. &lt;div className=&quot;home__featured-products-wrapper&quot;&gt;
  2.             &lt;div className=&quot;home__featured-element&quot;&gt;
  3.               &lt;img src={items[0].imgSrc} /&gt;
  4.               &lt;div&gt;{items[0].name}&lt;/div&gt;
  5.               &lt;div&gt;${items[0].price}&lt;/div&gt;
  6.             &lt;/div&gt;
  7.             &lt;div className=&quot;home__featured-element&quot;&gt;
  8.               &lt;img src={items[4].imgSrc} /&gt;
  9.               &lt;div&gt;{items[4].name}&lt;/div&gt;
  10.               &lt;div&gt;${items[4].price}&lt;/div&gt;
  11.             &lt;/div&gt;
  12.             &lt;div className=&quot;home__featured-element&quot;&gt;
  13.               &lt;img src={items[2].imgSrc} /&gt;
  14.               &lt;div&gt;{items[2].name}&lt;/div&gt;
  15.               &lt;div&gt;${items[2].price}&lt;/div&gt;
  16.             &lt;/div&gt;
  17.             &lt;div className=&quot;home__featured-element&quot;&gt;
  18.               &lt;img src={items[3].imgSrc} /&gt;
  19.               &lt;div&gt;{items[3].name}&lt;/div&gt;
  20.               &lt;div&gt;${items[3].price}&lt;/div&gt;
  21.             &lt;/div&gt;
  22. &lt;/div&gt;

答案1

得分: 0

你可以在伪元素 ::after 上添加 pointer-events: none，这样悬停效果会被图片“看到”。

这里是一个使用纯CSS/HTML演示的简化代码片段。

  1. <style>
  2.   .home__featured-element {
  3.     width: 30%;
  4.     height: 100%;
  5.     position: relative;
  6.   }
  7.   
  8.   img {
  9.     width: 100%;
  10.     height: 100%;
  11.     object-fit: cover;
  12.     transition: all 0.4s ease-in-out;
  13.   }
  14.   
  15.   img:hover {
  16.     cursor: pointer;
  17.     filter: brightness(70%);
  18.   }
  19.   
  20.   .home__featured-element::after {
  21.     content: "ADD TO CART";
  22.     position: absolute;
  23.     opacity: 0;
  24.     color: white;
  25.     left: 50%;
  26.     top: 50%;
  27.     transform: translate(-50%, -50%);
  28.   }
  29.   
  30.   .home__featured-element:hover::after {
  31.     opacity: 1;
  32.     pointer-events: none;
  33.   }
  34. </style>
  35. <div class="home__featured-products-wrapper">
  36.   <div class="home__featured-element">
  37.     <img src="https://picsum.photos/id/1016/300/300" />
  38.     <div>name</div>
  39.     <div>price</div>
  40.   </div>
  41. </div>

注意：你可能需要考虑这种方式在所有情况下是否有效——例如，屏幕阅读器用户可能无法获取相关信息。

英文:

You can put a pointer-events: none on the after pseudo element so the hover is 'seen' by the img.

Here's a simplified snippet using pure CSS/HTML to demonstrate.

<!-- begin snippet: js hide: false console: true babel: false -->

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

  1. &lt;style&gt;
  2.   .home__featured-element {
  3.     width: 30%;
  4.     height: 100%;
  5.     position: relative;
  6.   }
  7.   
  8.   img {
  9.     width: 100%;
  10.     height: 100%;
  11.     object-fit: cover;
  12.     transition: all 0.4s ease-in-out;
  13.   }
  14.   
  15.   img:hover {
  16.     cursor: pointer;
  17.     filter: brightness(70%);
  18.   }
  19.   
  20.   .home__featured-element::after {
  21.     content: &quot;ADD TO CART&quot;;
  22.     position: absolute;
  23.     opacity: 0;
  24.     color: white;
  25.     left: 50%;
  26.     top: 50%;
  27.     transform: translate(-50%, -50%);
  28.   }
  29.   
  30.   .home__featured-element:hover::after {
  31.     opacity: 1;
  32.     pointer-events: none;
  33.   }
  34. &lt;/style&gt;
  35. &lt;div class=&quot;home__featured-products-wrapper&quot;&gt;
  36.   &lt;div class=&quot;home__featured-element&quot;&gt;
  37.     &lt;img src=&quot;https://picsum.photos/id/1016/300/300&quot; /&gt;
  38.     &lt;div&gt;name&lt;/div&gt;
  39.     &lt;div&gt;price&lt;/div&gt;
  40.   &lt;/div&gt;
  41. &lt;/div&gt;

<!-- end snippet -->

Note: You may like to consider whether this way of showing the text works well in all circumstances- screen reader users may not get told about it for example.

huangapple
  • 本文由 发表于 2023年6月29日 00:55:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76575274.html
  • css
  • html
  • reactjs
  • sass
匿名

发表评论

匿名网友

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

确定