鼠標經(jīng)過背景變色的CSS代碼

2024-09-05 12:07:57

字體：大中小

供稿：網(wǎng)友

我們經(jīng)常上網(wǎng)的時候會見到，有些網(wǎng)站的某個部分，在鼠標放上后背景顏色會改變，移開后恢復(fù)，給人很不錯的操作體驗，那么這個效果是怎么用CSS來實現(xiàn)的呢？請不知道的朋友認真參考一下本款代碼，它專門是用來完成這一功能的代碼。

<!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>鼠標經(jīng)過背景變色的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邊框嵌套的實現(xiàn)代碼