设置了背景图，但是第一次hover会闪烁，该如何解决？？？？？

最新推荐文章于 2024-10-10 21:29:13 发布

Dark_programmer

最新推荐文章于 2024-10-10 21:29:13 发布

阅读量3k

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Dark_programmer/article/details/115462622

版权

css 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了如何在鼠标悬停时动态切换图片，提出了两种解决方案：动态切换组件和动态切换背景图。针对第二种方案出现的首次悬停闪烁问题，通过预加载背景图的CSS伪元素技巧进行了优化，从而实现平滑的图片切换效果，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

铁打的营盘流水的兵

当下有这么一个需求，鼠标经过图片的时候，切换显示的图片

思索许久，倒也有了那么两三个解决方案

方案一、动态切换显示的组件
方案二、动态切换背景图的路径

基于以上的两种方案，分别给个简单的🌰：
方案一：
html:

<div>鼠标经过，切换背景图</div>
<comp1 v-if="isHover" :imgSrc="isHover? imgSrc1 :imgSrc2" />
<comp1 v-else :imgSrc="isHover? imgSrc1 :imgSrc2" />

js:

data(){
	return {
		  isHover: false,
	      imgSrc1:
	        "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/MzUfQ3.jpg",
	      imgSrc2:
	        "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg"
	    };
	}
}

如此就可以进行组件的切换，展示不同的图片
比较简陋，也比较low

方案二：
html:

<div class="p10">鼠标经过，切换背景图</div>
<p />  <!-- 这里就是显示图片的容器 -->

css:

p {
  width: 300px;
  height: 300px;
  background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/MzUfQ3.jpg");
  background-size: 100%;
  &:hover {
      background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg");
    }
}

但是发现一个问题，每当首次hover的时候，总会莫名的闪烁，给人的体验感并不是特别好。那么，该如何悄悄地搞掉这个闪烁的过程呢？

可以发现，该案例中使用的img路径是网络图片，用来表示用CDN进行托管的图片

经过资料的查阅已经实践，发生闪烁这是页面加载数据的问题. 页面加载完成之后，这张背景图所以并没有被加载出来，因为这是在css中写的样式，而当你hover的时候这张图片才开始加载资源，所以首次会进行闪烁

如图所示：
在这里插入图片描述
找到了原因，那么就可以找到对应的解决办法。
能不能不要在切换的时候进行请求，而是在hover之前进行这一操作呢？

Of course I can !!!

修改css，如下：
css:

p {
  width: 300px;
  height: 300px;
  background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/MzUfQ3.jpg");
  background-size: 100%;
  
  &::after {
    display: none;
    content: "";
    width: 300px;
    height: 300px;
    background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg");
    background-size: 100%;
  }
  &:hover::after {
    display: block;
  }
}