Question

下面的代码会将鼠标悬停在＃admin1上时显示#testnav1元素。

我希望能够在鼠标选择两个元素时隐藏＃testnav1，而不仅仅是一个或另一个元素。基本上，它是一个下拉菜单的一部分，使得＃testnav1出现在＃admin1元素的左侧。

<script>
    $(function() {
        $("#admin1").hover(function() {
            var x = $(this).offset();
            var leftAjust = x.left - $("#testnav1").css("width").replace(/[^-\d\.]/g, '') - 1;
            $("#testnav1").css({"position": "absolute", "left": leftAjust, "top": x.top}).show();                
        });
    });
</script>

Answer 1

试试这个，

 $("#admin1").hover(function() {
     var x = $(this).offset();
     var leftAjust = x.left - $("#testnav1").css("width").replace(/[^-\d\.]/g, '') - 1;
     $("#testnav1").css({"position": "absolute", "left": leftAjust, "top": x.top}).show();                
 },function(){
     $("#testnav1").hide();// hide the element on mouse leave
 });

<强>更新

var flagAdmin=false;var flagTestNav=false;
$("#testnav1").mouseleave(function(){
   flagTestNav=true;
   hideTestNav();
})
$("#admin1").hover(function() {
     flagAdmin=false;flagTestNav=false;
     var x = $(this).offset();
     var leftAjust = x.left - $("#testnav1").css("width").replace(/[^-\d\.]/g, '') - 1;
     $("#testnav1").css({"position": "absolute", "left": leftAjust, "top": x.top}).show();                
},function(){
     flagAdmin=true;
     hideTestNav();
});
function hideTestNav(){
    if(flagAdmin==true && flagTestNav==true)
    {
        $("#testnav1").hide();// hides only if both admin and testnav mouse-leaves
    }
}

JQuery - 在离开TWO元素时隐藏元素

1 个答案: