Question

当链接悬停在上方时，我会出现一个div，问题是我希望div在鼠标悬停在其上时仅在屏幕上显示，而仅在mouseout消失时显示。

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

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

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

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

Answer 1

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

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

1 个答案: