将鼠标停留在onclick元素上

Retain the mouse over element onclick

本文关键字：元素 onclick 停留在 鼠标      更新时间：2023-09-26

这可能看起来很简单，但不幸的是我不知道如何得到这个效果。

我有一个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();
});

小提琴

我想这会对你有帮助。

Try this: 

  $(".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();        
    });
工作小提琴

在单击父类时添加一个类，检查它是否在鼠标左侧有该类:

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

try this:

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;
});
相关文章：