无序UL列表鼠标经过更换背景色

2024-09-05 12:21:51

字体：大中小

来源：转载

供稿：网友

这是一个比较常用的CSS特效，我们会经常见到有些网站的某个列表在鼠标经过列表某一项的时候，显示出漂亮的背景色，用CSS实现起来也非常简单，本实例就是实现了这样一种效果，好好研究一下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>无序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 {  width: 280px;}#links li a:hover {        background: skyblue; }#links a em {         display: block;        font: normal 85% Verdana, Helvetica, sans-serif;        line-height: 125%; }#links a span {        font: normal 70% Verdana, Helvetica, sans-serif;        line-height: 150%;}</style></head><body><div id="links">  <ul>    <li>小站</em> <span><br>我们提供上千种CSS、JavaScript代码，助你网站设计一路狂奔！</span></li>    <li>进入首页</em><br><span>为你提供精品学习型代码资源，每一款代码都经过站长测试，为你节省宝贵的测试时间。</span></li>  </ul></div></body></html>

上一篇：CSS控制背景垂直或水平重复

下一篇：JavaScript点击图片无刷新切换背景