如何刪除p元素上的額外覆蓋層？

我有一個翻轉圖像，當用戶懸停時添加疊加層。
當用戶將鼠標懸停在圖像上時，我還會在圖像頂部顯示「立即購買」文本。
我的問題是，當用戶將鼠標懸停在圖像上時，覆蓋圖將添加到包含圖像的div以及「顯示」文本。
這使得「Shop Now」文本看起來更暗，因爲它有兩個疊加層。

如何刪除「立即購買」文本上的額外圖層？
如何刪除p元素上的額外覆蓋層？

這是我的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>

這裏是我的小提琴：
https://jsfiddle.net/a75wbabp/

與現在店文字看起來應該像這樣的橢圓形

來源

2016-09-29 altoids

爲什麼JavaScript代碼？ – j08691

@ j08691我的錯我改變爲CSS – altoids

添加這個CSS的:hover規則之後：

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

問題是按鈕繼承了容器的一些奇怪的原因，背景色。這將確保它保持透明。

來源

2016-09-29 18:04:24

您需要將它添加到.shop-now-button懸停

background: transparent;

檢查小提琴https://jsfiddle.net/Pranesh456/3uszm3o7/1/

來源

2016-09-29 18:06:12

如何刪除p元素上的額外覆蓋層？

回答

相關問題