先來舉個(gè)簡(jiǎn)單的簡(jiǎn)單的nav里面常用的鼠標(biāo)經(jīng)過小例子！這個(gè)是在body里面寫的

<ul><li class="li1">1</li><li class="li1">2</li><li class="li1">3</li><li class="li1">4</li><li class="li1">5</li></ul>

接下下來在css里面寫下它的樣式

1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 ul{ 6 width: 1000px; 7 height: 200px; 8 margin: 0 auto; 9 } 10 .li1{ 11 width: 200px; 12 height: 200px; 13 background-color: #FC0BF5; 14 float: left; 15 text-align: center; 16 line-height: 200px; 17 font-size: 50px; 18 list-style: none; 19 } 20 .li2{ 21 width: 200px; 22 height: 200px; 23 background-color: #17FE03; 24 } 25 .lili{ 26 width: 200px; 27 height: 200px; 28 background-color: #17FE03; 29 }

里面有2個(gè)空的class屬性

現(xiàn)在的頁面是這樣的

現(xiàn)在讓我們通過addClass里給他們加上這個(gè)效果

<script type="text/javascript">$(".li1").eq(0).addClass("lili")$(".li1").mouseenter(function () {$(this).addClass("li2")}).mouseleave(function () {$(this).removeClass("li2")})</script>

這就是鼠標(biāo)移上去的效果 這個(gè)第一個(gè)塊是綠色是因?yàn)?strong>$(".li1").eq(0).addClass("lili") 我們給了他個(gè)默認(rèn)樣式！

現(xiàn)在通過以上的JS代碼可以實(shí)現(xiàn)鼠標(biāo)移上去就會(huì)給這個(gè)li加上你想加的屬性，當(dāng)我鼠標(biāo)滑過的話就會(huì)加上這個(gè)屬性 鼠標(biāo)離開就會(huì){removeClass("li2")}，清楚這個(gè)屬性！要注意的是我上面的是在加載了jQuery的這個(gè)插件才可以的！

第一次發(fā)！希望大家多多批評(píng)指教！

轉(zhuǎn)載于:https://www.cnblogs.com/slhdry/p/5917253.html

總結(jié)

以上是生活随笔為你收集整理的jQuery里面的addClass讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。