實(shí)現(xiàn)隔行換色效果的兩種方式【實(shí)用】

更新時(shí)間：2016年11月27日 16:49:08 作者：森林王子

本文主要介紹了實(shí)現(xiàn)隔行顏色交替鼠標(biāo)經(jīng)過高亮顏色的兩種方式的具體實(shí)例，有助于理解和使用。方案一：純CSS編寫；方案二：js代碼編寫。需要的朋友可以參考下

純CSS方式實(shí)現(xiàn)隔行顏色交替、鼠標(biāo)經(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方式實(shí)現(xiàn)隔行顏色交替、鼠標(biāo)經(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)容，希望對(duì)大家有所幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

隔行換色

相關(guān)文章

js console.log打印對(duì)象時(shí)屬性缺失的解決方法
在編寫代碼時(shí)，我們常常用 console.log() 的方式將信息在控制臺(tái)中打印出來以幫助我們進(jìn)行前端調(diào)試，那么console.log打印對(duì)象時(shí)屬性缺失怎么辦？下面我們就一起來了解一下解決方法
2019-05-05
httpclient模擬登陸具體實(shí)現(xiàn)(使用js設(shè)置cookie)
最簡單的方法就是通過得到的cookie定制一個(gè)httpclient，感興趣的朋友可以了解下本文
2013-12-12
javascript網(wǎng)頁關(guān)閉時(shí)提醒效果腳本
當(dāng)頁面載入和關(guān)閉時(shí)會(huì)出現(xiàn)一些提示信息的代碼。方便提醒用戶，但不建議多用，讓人感到反感。
2008-10-10
JavaScript?位運(yùn)算及實(shí)際應(yīng)用實(shí)例
這篇文章主要為大家介紹了JavaScript位運(yùn)算及實(shí)際應(yīng)用實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-08-08
JavaScript阻止事件冒泡和默認(rèn)行為的方法舉例
JavaScript事件的默認(rèn)行為指瀏覽器自動(dòng)執(zhí)行的操作,如鏈接跳轉(zhuǎn)或表單提交,阻止這些行為可以使用event.preventDefault()、return?false或event.returnValue屬性,event.stopPropagation()用于阻止事件傳播,不直接阻止默認(rèn)行為,需要的朋友可以參考下
2024-10-10
JS截取字符串實(shí)例詳解
這篇文章主要介紹了JS截取字符串的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript截取字符串的常用函數(shù)與具體使用技巧,并附帶說明了JS截取字符串substr和substring方法的區(qū)別,需要的朋友可以參考下
2015-11-11
javascript獲取網(wǎng)頁寬高方法匯總
本文給大家匯總介紹了下javascript獲取網(wǎng)頁寬高的方法，以及各個(gè)瀏覽器下不同方法獲取到的值的對(duì)比，有需要的小伙伴可以參考下。
2015-07-07
基于layui實(shí)現(xiàn)登錄頁面
這篇文章主要為大家詳細(xì)介紹了基于layui實(shí)現(xiàn)登錄頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例
本文主要介紹了Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲
這篇文章主要介紹了基于javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲的具體實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-04-04