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

ttx9n · 发表于 2009-7-11 19:19:41

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

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

dingzhi521 · 发表于 2022-9-26 00:23:19

啪啪啪生怕PSP怕

qzdhcgs · 发表于 2022-11-27 00:33:11

数据库了多久撒快乐的健身卡啦

ppwxcg · 发表于 2022-12-17 01:14:57

我找了挺久终于找到了

fiyeid · 发表于 2023-1-19 02:00:40

借款金额看了就立刻

rveqwdpw5 · 发表于 2023-2-18 22:19:15

66666666666666666666

xf9hlg1 · 发表于 2023-6-24 02:24:48

vcxvcxv

czoz5y · 发表于 2023-9-12 17:24:52

那三门，你们谁寂寞才快乐撒

kwa3hgmjp · 发表于 2023-12-1 09:29:00

感谢楼主分享

cxst1h57 · 发表于 2024-4-4 11:25:32

好东西可以可以可以可以

账号		自动登录	找回密码
密码			立即注册

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

相关帖子