先來舉個簡單的簡單的nav里面常用的鼠標經過小例子！這個是在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個空的class屬性

現在的頁面是這樣的

現在讓我們通過addClass里給他們加上這個效果

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

這就是鼠標移上去的效果 這個第一個塊是綠色是因為$(".li1").eq(0).addClass("lili") 我們給了他個默認樣式！

現在通過以上的JS代碼可以實現鼠標移上去就會給這個li加上你想加的屬性，當我鼠標滑過的話就會加上這個屬性 鼠標離開就會{removeClass("li2")}，清楚這個屬性！要注意的是我上面的是在加載了jQuery的這個插件才可以的！

第一次發！希望大家多多批評指教！

轉載于:https://www.cnblogs.com/slhdry/p/5917253.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。