鼠标经过背景变色的CSS代码

2024-09-05 12:07:57

字体：大中小

来源：转载

供稿：网友

我们经常上网的时候会见到，有些网站的某个部分，在鼠标放上后背景颜色会改变，移开后恢复，给人很不错的操作体验，那么这个效果是怎么用CSS来实现的呢？请不知道的朋友认真参考一下本款代码，它专门是用来完成这一功能的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>鼠标经过背景变色的CSS代码</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">*{	margin:0;	padding:0;	list-style:none;	font-size:14px;}img{	border:1px solid #ccc;}.info li{	padding:5px;	width:144px;	float:left;}.info li .img{	padding:5px;	border:1px solid #cbcbcb;	display:block;}.info li .img:link,.info li .img:visited{	border:1px solid #cbcbcb;}.info li .img:hover{	border:1px solid #cbcbcb;	background:#f0f0f0;	color:red;}span{	display:block;	width:100%;	clear:both;	text-align:center;}</style></head><body><div class="info">	<ul>	<li><a href="#" class="img"><img src="/d/file/p/2020/01-27/7fc88e0631de200c4be3c2fd7e469f62.jpg"><span>图片名称</span></a></li>	<li><a href="#" class="img"><img src="/d/file/p/2020/01-27/bf48717d90d3d781b61c1fd9daa1703d.jpg"><span>图片名称</span></a></li>	<li><a href="#" class="img"><img src="/d/file/p/2020/01-27/cf5ce65e5966e2b84f95565ee1fd0b3b.jpg"><span>图片名称</span></a></li>	</ul></div></body></html>

上一篇：学习用CSS修饰一个类似Tab的标签样式

下一篇：css边框嵌套的实现代码