将鼠标停留在元素onclick上

时间:2014-05-29 07:45:53

标签: javascript jquery html css

这可能看起来很简单,但不幸的是我没有得到如何产生这种效果。

我有一个div,里面有一个子div,需要显示在父div的mouse-over上。

子div中有另一个内容面板,必须在点击子div时显示。

这两个效果很好,但这里的问题是,我需要在点击孩子时显示鼠标离开的孩子div。

$(".wrapper").mouseover(function() {
        $(this).find('.child').show();
    }).mouseleave(function(){
        $(this).find('.child').hide();
});


$(".child").click(function() {
        $(this).find('span').show();

});

Fiddle

3 个答案:

答案 0 :(得分:1)

我认为这会对你有帮助。

试试这个:

  $(".wrapper").mouseover(function() {
            $(this).find('.child').show();
        }).mouseleave(function(){
            if($(this).find('.child span').is(':visible') == false){
                $(this).find('.child').hide();
            }
    });


    $(".child").click(function() {
        $(this).find('span').show();        
    });

Working Fiddle

答案 1 :(得分:0)

在点击时在父级上添加一个类,检查鼠标离开时是否有该类:

$(".wrapper").mouseover(function() {
    $(this).find('.child').show();
}).mouseleave(function(){
    if(!$(this).hasClass('clicked'))
      $(this).find('.child').hide();
});

$(".child").click(function() {
    $(this).parent().addClass('clicked').find('.child span').show();
});

JSFiddle

答案 2 :(得分:0)

试试这个:

var clicked=false;
$(".wrapper").mouseover(function() {
    $(this).find('.child').show();
}).mouseleave(function(){
    if(!clicked){
        $(this).find('.child').hide();
        }
});

$(".child").click(function() {
    $(this).find('span').show();
    clicked=true;
});