Question

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

我有一个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

Answer 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

Answer 2

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

$(".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

Answer 3

试试这个：

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;
});

将鼠标停留在元素onclick上

3 个答案: