保持div打开直到鼠标离开div [英] keep div open until the mouse leave the div

问题描述

当链接悬停时，我有一个div出现，问题是我希望当鼠标悬停在其上时该div停留在屏幕上，而仅在mouseout时消失.

I have a div that appears when a link is hovered over, problem is I want the div to stay on the screen when mouse is over it and only disappear on mouseout.

我无法使它工作，将鼠标移离链接后，div几乎消失了

I cannot get it to work, the div disappears almost as soon as I move the mouse off the link

对此有任何帮助，我下面的代码

Any help with this would be appreciated, the code I have is below

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

   

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

感谢大家的帮助，这是一个愚蠢的错误，我看不到.我已经修改了代码以显示它现在可以按我的意愿工作.

Thanks everyone for their help, it was a silly mistake which I could not see. I have modified code to show it now works as I wanted.

推荐答案

您必须将.hidden添加到class="container flyout"中，然后执行以下操作:

You have to add .hidden into the class="container flyout", then do like this:

$(function hoverInit() {
  $('ul li a').mouseenter(function() {
    $('.flyout').removeClass('hidden')
  })
  $('ul li a').mouseleave(function() {
    $('.flyout').addClass('hidden')
  })
})

.hidden {
  display: none;
}
.container {
  background-color: red;
}

  <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 hidden">
  Content goes here
</div>

这篇关于保持div打开直到鼠标离开div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！