Chrome 悬停效果卡在圆角上

Question

我在容器中有一个图像。容器具有圆角以使子图像呈圆形。在父级上有悬停效果，但在 Chrome（但不是 Firefox！）中，当光标离开图像时效果仍然存在。

预计（Firefox）：

实际 (Chrome):

请看下面我的演示代码：

.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>

我希望悬停效果在离开“圆圈”时立即结束。任何帮助将不胜感激。

Answer 1

尝试将 border-radius 添加到图像 class .user 到：

.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>

Chrome 悬停效果卡在圆角上

Chrome hover effect sticking on rounded corners

html

css

image

border

styling