列表划过效果,和点击效果!!!-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_16166/article/details/82365850

本文介绍了一种使用CSS和JavaScript实现的列表划过及点击效果。通过定义不同的CSS类来改变列表项的背景颜色，并利用JavaScript进行交互控制，使得列表在鼠标划过时能够展现出动态效果，并且在点击时保留痕迹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　[b] 列表划过效果，和点击效果！！！ [/b][b]收藏 [/b]
　　js效果的鼠标划过列表并且点击留下混迹。
　　css代码： .mail-l-bg { float:left; background:url(../images/mail-l-bg.gif)!important; width:170px; height:371px; margin:6px 4px; display:inline } .c{ clear:both} .mail-line-bg { float:left; width:158px; height:22px; margin:10px 0px 3px 6px; color:#333; cursor:hand; display:inline } .mail-line-bgcolor { background-color:#72a6e0; } .mail-line-bg img { float:left; margin:4px 10px; display:inline } .mail-line-bg div { float:left; margin:5px 4px !important margin:4px 4px; display:inline } .mail-line-bg font { float:left; margin:3px 2px !important margin:2px 2px; font-size:12px; font-weight:bold } .mail-line-bg1 { float:left; width:158px; height:22px; margin-bottom:3px; margin-left:6px; color:#333; cursor:hand; display:inline } .mail-line-bgcolor1 { background-color:#dfe8f1; } .mail-line-bg1 img { float:left; margin:4px 10px; display:inline } .mail-line-bg1 div { float:left; margin:5px 4px !important margin:4px 4px; display:inline } .mail-line-bg1 font { float:left; margin:3px 2px !important margin:2px 2px; font-size:12px; font-weight:bold } .m-xian { margin-left:auto; margin-right:auto; background-color:#d7dee4; width:90%; height:1px; } .hh8 { float:left; height:8px; width:100%; } .bg_bule { float:left; width:100%; background-color:#c7d4e5; margin-bottom:-9999px; padding-bottom:9999px; } js代码： //设置背景色 setclassbg = function(obj, classname) { obj.className = classname; } //点击后更改背景 onclickbg = function(obj,counts) { var oid = obj.id; for (var i = 0; i 新闻风云榜制度文化新闻风云榜制度文化
　　