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>

我希望当鼠标移开“圆形”时，悬停效果能立即结束。任何帮助都将不胜感激。

- George

---

因此，在Chrome中，鼠标需要完全离开div。 - mplungjan

@mplungjan 是的，不幸的是，那就是问题所在。 - George

Answer 1

尝试在图像类 .user 中也添加 border-radius：

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

- Nikola Pavicevic