實現(xiàn)隔行換色效果的兩種方式【實用】
更新時間：2016年11月27日 16:49:08 作者：森林王子
本文主要介紹了實現(xiàn)隔行顏色交替 鼠標經(jīng)過高亮顏色的兩種方式的具體實例，有助于理解和使用。方案一：純CSS編寫；方案二：js代碼編寫。需要的朋友可以參考下
純CSS方式實現(xiàn)隔行顏色交替、鼠標經(jīng)過高亮顏色：
<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方式實現(xiàn)隔行顏色交替、鼠標經(jīng)過高亮顏色：
<html>
<head>
<title></title>
<script src="http://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>
以上就是本文的全部內(nèi)容，希望對大家有所幫助，同時也希望多多支持腳本之家！
相關文章
下面小編就為大家分享一篇純js代碼生成可搜索選擇下拉列表的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了js實現(xiàn)可多次定時的倒計時小實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)錄音功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)js浮動框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章將展示如何在 Bootstrap輪播上添加有趣的動畫效果，同時確保這個js組件自由擴展和快速上手，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了Javascript中的匿名函數(shù)與封裝介紹,本文分析了jQuery 封裝、Backbone 封裝、Underscore 封裝等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要為大家介紹了SVG快速構建馬賽克效果示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了js關于命名空間的函數(shù),實例講述了namespace函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了VSCode 配置uni-app的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
在服務端(Page.Write)調(diào)用自定義的JS方法詳解
自從[javascript]自定義MessageBox一文發(fā)布以后，很多網(wǎng)友都來信詢問，如何在服務端調(diào)用ShowInfo方法，周末休息想了個折中的辦法來實現(xiàn)2013-08-08