jQuery实现鼠标划过添加和删除class的方法

本文实例讲述了jQuery实现鼠标划过添加和删除class的方法。分享给大家供大家参考。具体实现方法如下：

$('#elm').hover(

function(){

$(this).addClass('hover')

},

function(){

$(this).removeClass('hover')

}

)

希望本文所述对大家的jQuery程序设计有所帮助。

<div class="nav"> <a href="" class="nav01">导航01</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="" class="nav02">导航02</a> </div>

<div class="mokuai">

  <div class="list02Box a" style="display:none">

    <div class="list02 clearfix">

      <div class="box1" style="margin-left:160px">

        <div class="list_title">AAAAAA</div>

        <ul>

          <li><a href="">门户平台</a></li>

          <li><a href="">服务中心</a></li>

          <li><a href="">认证中心</a></li>

          <li><a href="">流程事务中心</a></li>

          <li><a href="">消息中心</a></li>

          <li><a href="">大数据中心</a></li>

        </ul>

      </div>

    </div>

  </div>

  <div class="list02Box b" style="display:none">

    <div class="list02 clearfix">

      <div class="box1" style="margin-left:160px">

        <div class="list_title">BBBBB</div>

        <ul>

          <li><a href="">门户平台</a></li>

          <li><a href="">服务中心</a></li>

          <li><a href="">认证中心</a></li>

          <li><a href="">流程事务中心</a></li>

          <li><a href="">消息中心</a></li>

          <li><a href="">大数据中心</a></li>

        </ul>

      </div>

    </div>

  </div>

</div>

<script>

$(".nav a").hover(function(){

var index = $(this).index()

$(".mokuai").find(".list02Box").eq(index).slideDown().siblings().slideUp()

//小伙，这是我给你改过的代码，你自己慢慢研究吧啊

})

</script>

给你个思路，在标签下加个标签，如i

然后应用CSS：width为a标签的宽度，height:1px，然后定位到a标签底部

然后就是mouseover执行相应 *** 作，到这里你应该都会做了

---