<!DOCTYPE html> <html> <head> <title>事件綁定之鼠標懸停</title> <script src="jquery-3.1.1.js"></script> <script> </script> <style type="text/css"> .head{ width: 200px; border: 1px solid #000; background-color: #ccc; } .content{ display: none; } </style> </head> <body> <h2 class="head">事件綁定</h2> <div class="content">這是一段文字</div> </body> </html>
HTML CSS代碼如上下面開始jQuery代碼
入門（click）
<script> $('.head').bind('click',function(){ $(this).next().show(); }); </script>
增加效果 鼠標單擊標題顯示，在此單擊隱藏
<script> $('.head').bind('click',function(){ var $content = $(this).next(); if($content.is(':visible')){ $content.show(); }else{ $content.hide(); } }); </script>
進階--改變事件綁定類型
<script> $(function(){
$('.head').bind('mouseover',function(){
$(this).next().show();
}).bind('mouseout',function(){ $('.content').hide(); });
})
</script>
精通--簡寫綁定事件
<script> $(function(){ $('.head').mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide(); }); }) </script>
骨灰級本以為上面的簡寫很簡單了，沒想到jQuery還提供了更為簡單的方法
$(function(){ //hover()方法 $('.head').hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }); });
另外，hover()方法准確的來說是替代jQuery中的bind('mouseenter')和bind('mouseleave'),而不是替代bind('mouseover')和bind('mouseout')。因此當需要觸發hover()方法的第2個函數時，需要用trigger('mouseleave')來觸發，而不是trigger('mouseout')。