实现隔行换色效果的两种方式【实用】
更新时间：2016年11月27日 16:49:08 作者：森林王子
本文主要介绍了实现隔行颜色交替 鼠标经过高亮颜色的两种方式的具体实例，有助于理解和使用。方案一：纯CSS编写；方案二：js代码编写。需要的朋友可以参考下
纯CSS方式实现隔行颜色交替、鼠标经过高亮颜色：
<html>
<head>
<title></title>
<style type="text/css">
ul{list-style:none}
li:nth-child(odd){background-color:#eee}
li:hover{background-color:Yellow}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
</html>
js方式实现隔行颜色交替、鼠标经过高亮颜色：
<html>
<head>
<title></title>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.alter-item {
background-color: #eee;
}
.hightlight {
background-color: Yellow;
}
</style>
<script type="text/javascript">
$(function () {
//隔行颜色
$("ul li:odd").addClass("alter-item");
method1();
});
//方法1：
function method1() {
$("ul li").hover(function () {
$(this).addClass("hightlight");
}, function () {
$(this).removeClass("hightlight")
});
}
//方法2：
function method2() {
$("ul li").mouseover(function () {
$(this).addClass("hightlight").siblings().removeClass("hightlight");
});
}
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222222222</li>
<li>111</li>
<li>444444444444444444444</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持脚本之家！
相关文章
在编写代码时，我们常常用 console.log() 的方式将信息在控制台中打印出来以帮助我们进行前端调试，那么console.log打印对象时属性缺失怎么办？下面我们就一起来了解一下解决方法2019-05-05
httpclient模拟登陆具体实现(使用js设置cookie)
最简单的方法就是通过得到的cookie定制一个httpclient，感兴趣的朋友可以了解下本文2013-12-12
当页面载入和关闭时会出现一些提示信息的代码。方便提醒用户，但不建议多用，让人感到反感。2008-10-10
这篇文章主要为大家介绍了JavaScript位运算及实际应用实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-08-08
JavaScript事件的默认行为指浏览器自动执行的操作,如链接跳转或表单提交,阻止这些行为可以使用event.preventDefault()、return false或event.returnValue属性,event.stopPropagation()用于阻止事件传播,不直接阻止默认行为,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了JS截取字符串的方法,结合实例形式较为详细的分析了JavaScript截取字符串的常用函数与具体使用技巧,并附带说明了JS截取字符串substr和substring方法的区别,需要的朋友可以参考下2015-11-11
本文给大家汇总介绍了下javascript获取网页宽高的方法，以及各个浏览器下不同方法获取到的值的对比，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要为大家详细介绍了基于layui实现登录页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本文主要介绍了Bootstrap 按钮下拉菜单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
javascript HTML5 canvas实现打砖块游戏
这篇文章主要介绍了基于javascript HTML5 canvas实现打砖块游戏的具体实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论