jQuery mouseover显示隐藏的div并显示div,如果只有鼠标仍然在div上

前端之家收集整理的这篇文章主要介绍了jQuery mouseover显示隐藏的div并显示div,如果只有鼠标仍然在div上前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我的鼠标悬停和鼠标输出功能有问题.当我鼠标悬停链接时,它会显示一个隐藏的< div>,当我鼠标移出div时,它会隐藏div.问题是,如果我将鼠标悬停在链接上,那么我将鼠标移动到不在div上方的其他地方,div将不会消失.@H_404_3@

如果我使用链接的mouSEOut事件来设置div的可见性,那么我将无法将鼠标悬停在div上.@H_404_3@

这是我的HTML:@H_404_3@

@H_404_3@

Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        SEOver(function() {
                    $("#hello").css('visibility','visible');
                });

                $("#hello").mouSEOver(function() {
                    $("#hello").css('visibility','visible');
                });
                $("#hello").mouSEOut(function() {
                    $("#hello").css('visibility','hidden');
                });
            });
        
最佳答案
我使用setTimeout函数来更改css属性.将setTimeout的时间间隔设置为~333-500毫秒,并将Div的鼠标悬停设置为清除超时.然后,在div本身的mouSEOut上,再次设置计时器:)@H_404_3@

示例/回答:@H_404_3@

@H_404_3@

// timer for hiding the div
var hideTimer;

// show the DIV on mouse over
$("#show_div").mouSEOver(function() {
    // forget any hiding events in timer
    clearTimeout( hideTimer );
    $("#hello").css('visibility','visible');
});

$("#hello").mouSEOver(function() {
    clearTimeout( hideTimer );
    $("#hello").css('visibility','visible');
});

// set a timer to hide the DIV
$("#show_div").mouSEOut(function() {
    hideTimer = setTimeout( hideHello,333 );
});

$("#hello").mouSEOut(function() {
    hideTimer = setTimeout( hideHello,333 );
});

// hides the DIV
function hideHello() {
    $("#hello").css('visibility','hidden');
}
原文链接:https://www.f2er.com/html/425708.html

猜你在找的HTML相关文章