css - CSS边框半径和过滤灰度不一起工作
问题描述
我有一些使用边界半径和灰度过滤器的css。我希望边界半径一直到位,但灰度在悬停时消失。
边界半径工作正常,直到我添加灰度,然后它停止工作,只是将图像显示为正方形。在悬停时(当过滤器被移除时)边界半径再次启动。有谁知道我错过了什么?
我已经搜索但找不到答案。
.esg-entry-media {
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 50% !important;
border-radius: 50% !important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.esg-entry-media:hover {
border: solid 10px #fff !important;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
我已经包含了悬停和非悬停状态的图像以供参考。
解决方案
您可以使用 div 包裹图像并overflow: hidden;
在其上放置一个 div 并赋予 div 相同的宽度和高度。然后放border-radius: 50%; 在 div 上。仅在图像上应用灰度。最后改变img做,
div:hover .esg-entry-media{
filter: grayscale(0)
}
在包装 div 上,
div:hover {
border: 10px solid *coloryouwant*
}
推荐阅读
- shell - Yarn v1 的脚本执行 shell 的文档在哪里?
- python - 如何获取类别名称而不是 ID
- html - 用边界半径在 div 内放置图像?
- python - Flask SQLAlchemy bulk_save_objects 没有性能改进
- excel - 考虑到相邻单元格的 Excel 计数(沿列求和,但跨行查看)
- scheme - set的用法之间的区别!并定义
- python - python变量声明理解困难
- angular - Typescript/ Angular - 如何重命名从服务器接收到的对象?
- python-3.x - 为什么我的输出有一个女性符号,我该如何摆脱它?
- laravel - 如何在 Laravel 中的另一个关系中获取 hasmany 关系