如何删除 p 元素上的额外覆盖层？

Question

我有一个鼠标悬停图像，它会在用户悬停鼠标时添加叠加层。
当用户将鼠标悬停在图像上时，我还会在图像顶部显示 "Shop Now" 文本。
我的问题是，当用户将鼠标悬停在图像上时，会向包含图像和 "Show Now" 文本的 div 添加叠加层。
这使得 "Shop Now" 文本看起来更暗，因为它有两个叠加层。

如何删除 "Shop Now" 文本上的额外图层？

这是我的 css:

.banner-box{
    width:313px;
    height:313px;

}

/*banner overlay*/


div.homepage-popular-categories {
    position: relative;
    display: inline-block;
}

div.homepage-popular-categories:hover p {
    background: rgba(0,0,0,0.5);
}

div.homepage-popular-categories p:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

div.homepage-popular-categories p {
    position: absolute;
    background: rgba(0,0,0,0);
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    color: #eeeeec;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    transition: 0.5s;
    opacity: 1;
}




div.homepage-popular-categories:hover .shop-now-button {
    visibility:visible;


}
div.homepage-popular-categories .shop-now-button {
    border-radius: 25px;
    border: 3px solid #fff;
    left: 0;
    right: 0;
    top: 28%;
    bottom: 0;
    max-height: 40px;
    margin: auto;
    padding-top:20px;
    box-sizing: border-box;
    max-width: 125px;
    font-size:1em;
    padding-top:5px;
    background: rgba(0,0,0,0);
    visibility:hidden;
}

/*end banner overlay*/

这是我的html

<a href="#">
  <div id="ipad-width1" class="grid12-4 banner strov-3-banners shop-by-goal banner-box homepage-popular-categories ">
    <p>SHOP BY GOAL</p>
    <p class="shop-now-button">Shop Now</p>
  </div>
</a>
<a href="#">
  <div class="grid12-4 banner strov-3-banners trending banner-box homepage-popular-categories ">
    <p>TRENDING</p>
    <p class="shop-now-button">Shop Now</p>
  </div>
</a>
<a href="#">
  <div id="ipad-width3" class="grid12-4 banner strov-3-banners new-arrivals banner-box homepage-popular-categories ">
    <p>NEW ARRIVALS</p>
<p class="shop-now-button">Shop Now</p>
  </div>
</a>

这是我的 fiddle:
https://jsfiddle.net/a75wbabp/

带有“立即购买”文字的椭圆形应如下所示

Answer 1

在 :hover 规则之后添加此 CSS：

div.homepage-popular-categories:hover .shop-now-button {
    background: rgba(0,0,0,0);
}

问题是按钮由于某种奇怪的原因继承了容器的背景色。这将确保它保持透明。

Answer 2

您需要在悬停时将其添加到 .shop-now-button

background: transparent;

勾选 fiddle https://jsfiddle.net/Pranesh456/3uszm3o7/1/

如何删除 p 元素上的额外覆盖层？

How do I remove an extra overlay layer on p element?

css

overlay

hover