同一个元素hover和active同时设置背景时，点击的瞬间背景色缩短一块？

最新推荐文章于 2024-09-14 18:52:56 发布

小宋子

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量186

点赞数

文章标签： javascript 开发语言 ecmascript css

本文链接：https://blog.csdn.net/songqiu821/article/details/133355601

版权

在项目中遇到这样的一个问题，当同一个元素hover和active同时设置背景时，点击的瞬间背景色缩短一块（颜色变化的瞬间会有个白色空隙），视觉上看着很不舒服。查了很多资料都不行，最后还是得巧用解决，以下代码亲测有效
在这里插入图片描述

<div class=‘item’>悬浮和点击时设置不同的背景色</div>

.item:before{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f4;
  z-index: -1;
}
.item:hover:before{
  background-color: #f4f4f4 ;
  content: "";
}
.item:after{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #EAEAEA;
  z-index: -1;
}
.item:active:after{
  content: "";
}