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

 首页 > 网页特效 > 文本特效 > 无序UL列表鼠标经过更换背景色

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

 2018-08-02  775  收藏  0 赞一个  0 真差劲  0 去评论

<!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><a href="#" title="欢迎光临">小站</em> <span><br>我们提供上千种CSS、JavaScript代码，助你网站设计一路狂奔！</span></a></li>
    <li><a href="#" title="一个高品质的源码下载站">进入首页</em><br><span>为你提供精品学习型代码资源，每一款代码都经过站长测试，为你节省宝贵的测试时间。</span></a></li>
  </ul>
</div>
</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

这是一个比较常用的CSS特效，我们会经常见到有些网站的某个列表在鼠标经过列表某一项的时候，显示出漂亮的背景色，用CSS实现起来也非常简单，本实例就是实现了这样一种效果，好好研究一下CSS代码，这对你将来设计网页很有帮助。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行