事件绑定之鼠标悬停 -入门-进阶-精通-骨灰（来自锋利的jQuery）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件绑定之鼠标悬停 -入门-进阶-精通-骨灰（来自锋利的jQuery）相关的知识，希望对你有一定的参考价值。
<!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(); }); });
以上是关于事件绑定之鼠标悬停 -入门-进阶-精通-骨灰（来自锋利的jQuery）的主要内容，如果未能解决你的问题，请参考以下文章