html - 圆角上的 Chrome 悬停效果
问题描述
我在容器中有一个图像。容器具有圆角,以使子图像呈圆形。父级上有悬停效果,但在 Chrome(但不是 Firefox!)中,当光标离开图像时,效果仍然存在。
请看下面我的演示代码:
.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>
我希望在离开“圆圈”时立即结束悬停效果。任何帮助,将不胜感激。
解决方案
也尝试添加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>
推荐阅读
- python - 如何将从.txt文件解析的空字符串转换为None?
- c++ - C++ 自定义 HashTable 的使用给出了 SegFault
- angular - 在 Angular 中获取上一个 URL
- cassandra - 有没有办法将现有的 cassandra(连同数据)与 Janusgraph 一起使用
- powershell - 目标计算机上的 PowerShell 在 TFS 2018 发布管道中失败
- regex - 正则表达式匹配文本和换行
- javascript - Laravel - 删除表单中上传的文件
- javascript - 集成 CKEditor API 以编程方式在组件中进行调用
- security - 如何使用 REMOTE_USER 配置 Airflow RBAC UI 安全性
- eclipse-plugin - Eclipse RCP 应用程序升级到最新