图标移上去改变（变色）

最新推荐文章于 2024-03-28 22:21:57 发布

雨下听风声

最新推荐文章于 2024-03-28 22:21:57 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：页面效果

本文链接：https://blog.youkuaiyun.com/qq_33338352/article/details/81502779

页面效果专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS替换背景图片的方法，通过修改.icon1类的背景图片源，实现鼠标悬停时图片的动态变化。这种方法可以应用于网页设计中，为用户提供更丰富的视觉体验。

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

方法一：通过背景图片的替换：

.icon1{background:url(images/i1.png) no-repeat; background-size:40%;width: 100%; height: 100px; margin-left: 32%  }
.icon1:hover{background:url(images/ii1.png) no-repeat; background-size:40%;width: 100%; height: 100px; margin-left: 32% }

以下是html代码：

<div class="container">
	<div class="col-md-1">
		<div class="top-grid">
			<span><label class="icon"></label></span>
			<!-- <h4><a href="#">OEM</a></h4> -->
		</div>
	</div>
	<div class="col-md-2">
		<div class="top-grid">
			<h4><a href="#"><span><label class="icon1"></label></span>Quality</a></h4>
		</div>
	</div>			
	<div class="col-md-1">
	    <div class="top-grid">
		<span><label class="icon"> </label></span>
	    </div>
    </div>
    <div class="clearfix"> </div>
</div>