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