当鼠标离开内容区域时,JS隐藏html内容

时间:2013-05-09 08:00:54

标签: javascript jquery html dom

我点击一个按钮后会出现一个元素。我现在想要的是当鼠标指针离开元素时隐藏元素。怎么可能?感谢

JS脚本:

          $(document).ready(function() {

          $('.hide').hide();



          $('.button').click(function() {
            $(this).closest('div').find('.hide').toggle(400);
            return false;           
          });

HTML code:

<a class="button" >More</a>

<div class="hide" ><img src="images/icon.png" /></div>
//I want this div hide element to hide after my mouse pointer leave this div area

非常感谢你:D

2 个答案:

答案 0 :(得分:8)

$("div.hide").mouseleave(function(){
    $(".hide").hide();
});

要再次显示div内容,您可以使用mouseenter(),如:

$("div.hide").mouseenter(function(){
    $(".hide").show();
});

或者您也可以这样做:(对于Toggle使用)

$("div.hide").mouseleave(function(){
    $(".hide").hide();
}).mouseenter(function(){
    $(".hide").show();
});

答案 1 :(得分:0)

您是否尝试过使用mouseout事件?

http://api.jquery.com/mouseout/