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

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中的mouse enter和mouse离开事件，否则可以使用如下的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函数使用与选择器相关的选择器。在您的情况下，相关的选择器将是 id Products。

示例：

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