鼠标激活显示背景色网页特效CSS代码

Sahar ·

更新时间:2024-09-21

· 963 次阅读

鼠标激活显示背景色，我们该如何编写这样的代码呢？我们来整理一下思路：把a里的部分设置成一个块元素，然后定义鼠标放上后的样式。CSS1中:hover只对a元素起作用，CSS2中:hover应用于所有元素．而IE7也没同样没有支持CSS2中的这个标准。所以为了适应所有浏览器还是要定义在a中.
代码运行效果：

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无序列表UL 鼠标激活显示背景色的实例</title> 
<style type="text/css"> 
#links ul { 
list-style-type: none; 
width: 280px; 
} 
#links li { 
border: 1px dotted #06f; 
border-width: 1px 0; 
margin-bottom: 16px; 
} 
#links li a { 
color: #00f; 
display: block; 
font: bold 120% Arial, Helvetica, sans-serif; 
padding: 8px; 
text-decoration: none; 
} 
* html #links li a { /* make hover effect work in IE */ 
width: 280px; 
} 
#links li a:hover { 
background: #f0f0f0; color:#036; 
} 
#links a em { 
color: #666; 
display: block; 
font: normal 85% Verdana, Helvetica, sans-serif; 
line-height: 125%; 
} 
#links a span { 
color: #999; 
font: normal 70% Verdana, Helvetica, sans-serif; 
line-height: 150%; 
} 
</style> 
</head> 
<body> 
<div id="links"> 
<ul> 
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - jb51.net</em> <span>jb51.net</span></a></li> 
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - jb51.net</em> <span>jb51.net</span></a></li> 
</ul> 
</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行

css代码激活背景色 CSS

1024 个赞