Chrome 悬停效果粘在圆角上

Posted 2023-03-06

【中文标题】Chrome 悬停效果粘在圆角上

【英文标题】：Chrome hover effect sticking on rounded corners

【发布时间】：2021-11-13 02:22:04

【问题描述】：

我在容器中有一张图片。容器具有圆角，以使子图像呈圆形。 父级上有悬停效果，但在 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>

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

【问题讨论】：

所以鼠标需要在chrome中留下完整的div

@mplungjan 是的，不幸的是，这就是问题所在。

【参考方案1】：

尝试将border-radius也添加到图像类.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>