热搜： Python 编程 PHP vue dedecms

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

发布时间：2023-03-13 07:17:51 来源：互联网

.

瞧，那夕阳边的云霞，好似得到了夕阳的赏赐，变得欣喜异常，时而围坐一团，倾诉衷肠；时而围着夕阳跳起了探戈；更有自我陶醉的，远离他人，自我欣赏……

鼠标激活显示背景色，我们该如何编写这样的代码呢？我们来整理一下思路：把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 rel="nofollow noopener noreferrer" href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - haodaima.com</em> <span>haodaima.com</span></a></li> 
<li><a rel="nofollow noopener noreferrer" href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - haodaima.com</em> <span>haodaima.com</span></a></li> 
</ul> 
</div> 
</body> 
</html>

到此这篇关于鼠标激活显示背景色网页特效CSS代码就介绍到这了。卓越的人一大优点是：在不利与艰苦的遭遇里百折不挠。更多相关鼠标激活显示背景色网页特效CSS代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： 鼠标网页特效