当鼠标离开调用元素并停留在目标元素上时，使目标元素保持打开状态

Question

我希望目标元素即使在鼠标离开调用进程的元素后也可见。让我们假设，将鼠标悬停在 A 上时，B 出现。我希望当鼠标退出 A 但悬停在 B 上时，B 仍然可见。 将鼠标悬停在手机图片上时类似的东西：https://buy.mazumamobile.com/all-products

下面是代码：

$(document).ready(function () {
$(".flyout").hide();
$("#Products").hover(function () {
$("#productList ").show();
}),
$(".flyout").mouseenter(function () {
$("#productList ").show();
});
$(".flyout").mouseleave(function() {
$(" #productList").hide();
});
});

.hidden {
display: none;
}
.container {
background-color: red;
}
.flyout {
position: absolute;
width: 900px;
min-height: 450px;
background: white;
overflow: hidden;
z-index: 10000;
border-radius: 5px;
border: 1px solid #E9ECEF;
box-shadow: 2px 2px 2px gray;
background-color:red;
}
.hidden {
visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" id="Products" name="Products">Text</a></li>
</ul>
<div id="productList" class="container flyout">
<div class="row">
<div class="col-md-4">
<h4>Content</h4>
<ul class="list-unstyled">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
<div class="col-md-4">
<h4>Content</h4>
<ul class="list-unstyled">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
</div>

感谢大家的帮助，我已经更新了代码，现在它可以按照我想要的方式工作

Answer 1

我认为，你犯了愚蠢的错误，因为你隐藏了鼠标离开和鼠标离开的同一类。

您可以使用

JavaScript 中的鼠标输入和鼠标离开事件，否则您可以使用如下所示的 Jquery 方法。

$(".flyout").mouseenter(function(){
$("use the div  selector but not use the above class ").show();
});
$(".flyout").mouseleave(function(){
$(" use the div  selector but not use the above class").hide();
})

Answer 2

您可以使用 jQuery 中的切换来获得结果。

$('#Products').hover(function(){
$('#productList').toggle();
console.log('shown');
});

另外 - 你有两个隐藏的 css 定义。将其更改为一个

.hidden {
display:none;
}

Answer 3

你不必使用大量的CSS和使用和addClass()函数。

您可以在最初加载元素时简单地使用hide()函数，然后在元素上使用toggle()函数。这将根据其当前状态在显示/隐藏状态之间切换。

由于您希望此功能围绕将鼠标悬停在链接元素上，因此您需要使用与mouseover和mouseout功能相关的选择器。在您的情况下，相关的选择器将是idProducts。

例：

$(document).ready(function () {
$('.flyout').hide();
$('#Products').mouseover(function () {
		$('.flyout').toggle();
}),
$('#Products').mouseout(function() {
		$('.flyout').toggle();
});
});

.hidden {
display: none;
}
.container {
background-color: red;
}
.flyout {
position: absolute;
width: 900px;
min-height: 450px;
background: white;
overflow: hidden;
z-index: 10000;
border-radius: 5px;
border: 1px solid #E9ECEF;
box-shadow: 2px 2px 2px gray;
background-color:red;
}
.hidden {
visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" id="Products" name="Products">Text</a></li>
</ul>
<div id="productList" class="container flyout">
<div class="row">
<div class="col-md-4">
<h4>Content</h4>
<ul class="list-unstyled">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
<div class="col-md-4">
<h4>Content</h4>
<ul class="list-unstyled">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
</div>