我正在使用帶有圖像疊加層的 Bootstrap Card 組件，我希望在鼠標懸停時該圖像疊加層出現在圖像上。在嘗試了此處類似問題的解決方案并嘗試了文檔中的所有內容后，當光標位于圖像上方時，我無法使覆蓋層不閃爍。任何建議都會非常感謝。我嘗試過使用顯示或不透明度而不是可見性，并且使用 :hover 選擇包含的 div 也沒有什么區別。.hidden-overlay { background-color: #222831; opacity: 80%; visibility: hidden;}.card-title { color: #00adb5; font-style: italic; font-weight: bold;}a:hover + .hidden-overlay { visibility: visible;}<div class="card bg-dark text-white"> <a href="https://codesandbox.io/README.md"> <img class="card-img img-fluid" src="images\Keeper.png" alt="Keeper image" /> </a> <div class="card-img-overlay hidden-overlay"> <h5 class="card-title">Keeper</h5> <p class="card-text">React, Hooks, Material UI, ES6</p> </div></div>再次強調，任何想法都將受到歡迎。謝謝。
2 回答
慕容森
TA貢獻1853條經驗 獲得超18個贊
問題是，您正在檢查同級錨標記的懸停狀態以設置hidden-overlay. 因此，當覆蓋層變得可見并位于錨點元素頂部時，錨點會松開懸停并出現 flickr。
只需將懸停偽類添加到父級即可。
<div class="card bg-dark text-white wrapper">
并將您的規則更新為
.wrapper:hover > .hidden-overlay {
visibility: visible;
}
.hidden-overlay {
background-color: #222831;
opacity: 80%;
visibility: hidden;
}
.card-title {
color: #00adb5;
font-style: italic;
font-weight: bold;
}
.wrapper:hover > .hidden-overlay {
visibility: visible;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white wrapper">
<a href="https://codesandbox.io/README.md">
<img
class="card-img img-fluid"
src="http://placekitten.com/g/200/300"
alt="Keeper image"
/>
</a>
<div class="card-img-overlay hidden-overlay">
<h5 class="card-title">Keeper</h5>
<p class="card-text">React, Hooks, Material UI, ES6</p>
</div>
</div>
藍山帝景
TA貢獻1843條經驗 獲得超7個贊
您可以嘗試使用 JS 事件來檢測而不是 CSS 選擇器。閃爍可能表明要公開的元素部分覆蓋了正在偵聽懸停事件的元素。也許 JS 事件可以更穩健地處理這種情況 -onMouseEnter等等。
- 2 回答
- 0 關注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消