我在一個容器內有一個影像。該容器具有圓角，以便使子影像成為圓形。 父影像上有一個懸停效果，但是在 Chrome 瀏覽器中（但不是 Firefox！），當游標離開影像時，該效果仍然存在。
預期（Firefox）：
實際情況（Chrome）：
請看我下面的演示代碼：
span class="hljs-selector-class">.user {
display: inline-block;
width: 200px;
height: 200px;
object-fit: cover;
}
.image-container {
background: black;
overflow: hidden;
width: 200px;
height: 200px;
border-radius: 50%;
padding-left: 0%;
}
.image-container：hover {
cursor: pointer;
}
.image-container:hover .user {
opacity: 0.3;
transition: 0.5s;
}<div class="image-container">
<img src="https://avatars. githubusercontent.com/u/16269580?v=4" class="user">
</div> 我想讓懸停效果在離開 "圓形 "時立即結束。希望得到任何幫助。
uj5u.com熱心網友回復：
嘗試將border-radius也添加到圖片類.user：
span class="hljs-selector-class">.user {
display: inline-block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}
.image-container {
background: black;
overflow: hidden;
width: 200px;
height: 200px;
border-radius: 50%;
padding-left: 0%;
}
.image-container：hover {
cursor: pointer;
}
.image-container:hover .user {
opacity: 0.3;
transition: 0.5s;
}<div class="image-container">
<img src="https://avatars. githubusercontent.com/u/16269580?v=4" class="user">
</div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/326123.html
標籤：
上一篇：滑鼠懸停在影像上時顯示文本
下一篇：使用畫布進行無限的影像移動