快捷導(dǎo)航

jQuery實現(xiàn)鼠標移入移出事件切換功能示例

更新時間：2018年09月06日 10:08:56 作者：shuair

這篇文章主要介紹了jQuery實現(xiàn)鼠標移入移出事件切換功能,結(jié)合實例形式分析了jQuery不同版本處理鼠標事件響應(yīng)與觸發(fā)相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)鼠標移入移出事件切換功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
    <style>
    #msg {
      color: #3c763d;
      background-color: #dff0d8;
      border-color: #d6e9c6;
      border-radius: 4px;
      padding: 15px;
    }
    </style>
    <title></title>
    <script>
      $(function(){
        $(msg).on({
          mouseover : function(){
            $(this).wrap("<h1>") ;
          } ,
          mouseout : function(){
            $(this).unwrap() ;
          } 
        }) ;
      }) ; 
    </script>
  </head>
  <body> 
    <p id="msg">Hello World !!!</p>
  </body>
</html>

hover() 方法規(guī)定當鼠標指針懸停在被選元素上時要運行的兩個函數(shù)。

jQuery 1.7 版本前該方法觸發(fā) mouseenter 和 mouseleave 事件。

jQuery 1.8 版本后該方法觸發(fā) mouseover 和 mouseout 事件。

注：關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
    <style>
    #msg {
      color: #3c763d;
      background-color: #dff0d8;
      border-color: #d6e9c6;
      border-radius: 4px;
      padding: 15px;
    }
    </style>
    <title></title>
    <script>
      $(function(){
        $(msg).hover(
          function(){
            $(this).wrap("<h1>") ;
          } ,
          function(){
            $(this).unwrap() ;
          } 
        ) ;
      }) ; 
    </script>
  </head>
  <body> 
    <p id="msg">Hello World !!!</p>
  </body>
</html>

代碼運行效果：