无法使用 jquery .hover

问题描述

大家早上好。希望你过得愉快。我有两个按钮和相应的菜单项。菜单容器默认是隐藏的，只有当光标悬停在按钮上时才会显示。

该功能似乎有效，只是它不允许我点击它们。当我试图联系他们时，它立即关闭。它就像它太近了，但到目前为止。我确定它正在发生，因为我只在按钮上使用 .hover()。每当光标离开按钮时，容器也会隐藏。我该如何解决？

我曾尝试使用 if statements、.hide() .show() 和 pure css 方法，但似乎没有任何效果。

这是片段：

const list1Btn              = document.querySelector('.nav #by-list1');
const list2Btn             = document.querySelector('.nav #by-list2');
const list1Container        = document.querySelector('.nav .list1-container');
const list2Container       = document.querySelector('.nav .list2-container');

$(list1Btn).hover(() => {
     $(list1Container).stop().fadetoggle();
})

$(list2Btn).hover(() => {
    $(list2Container).stop().fadetoggle();
})

.nav{
    position: relative;
    height:100%;
    display:flex;
    align-items:center;
}
.nav a{
    height:100%;
    display:flex;
    align-items:center;
}

.nav .list1-container,.nav .list2-container{
    position: absolute;
    top: 20px;
    left: 0px;
    background-color: #2e3032;
    z-index: 999;
    width: 500px;
    display: none;
}

.nav .dropdown-flex{
    display: flex;
    flex-wrap: wrap;
}

.nav .dropdown-flex .dropdown-column{
    width: 100%;
    flex: 0 50%;
    padding: 14px 35px;
}

.nav .dropdown-flex .dropdown-column div{
    border-bottom: 1px solid #45484a;
    padding-bottom: 2px;
    margin-bottom: 8px;
}

.nav .dropdown-flex .dropdown-column a{
    margin: 0;
    font-weight: 400;
    text-transform: none;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: 'Roboto';
}

.nav .dropdown-flex .dropdown-column:nth-child(2) div:last-child a{
    font-weight: 900;
    color: #ef969a;
}

.nav a{
    margin-left: 35px;
    text-decoration: none;
    color: #c7cacc;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.4px;
    transition: color 0.3s ease-in-out;
    position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
    <a id="by-list1">View List 1</a>
    <a id="by-list2">View List 2</a>

    <div class="list1-container">
        <div class="dropdown-flex">
            <div class="dropdown-column">
                <div><a href="#">Item 1</a></div>
                <div><a href="#">Item 2</a></div>
                <div><a href="#">Item 3</a></div>
                <div><a href="#">Item 4</a></div>
            </div>
        </div>
    </div>

    <div class="list2-container">
        <div class="dropdown-flex">
            <div class="dropdown-column">
                <div><a href="#">Item 7</a></div>
                <div><a href="#">Item 8</a></div>
                <div><a href="#">Item 9</a></div>
            </div>
        </div>
    </div>
</div>

解决方法

悬停效果必须放置在按钮和出现的 div 的公共容器上。

<div class="drop-container">
  <div class="drop-button">
  </div>
  <div class="drop-content">
  </div>
</div>

.drop-container:hover .drop-content {
  display: initial;
}
.drop-container .drop-content {
  position: absolute;
  display: none;
}

或者直接看：asyncio.sleep

,

正如我在评论中提到的，将按钮和菜单放在同一个容器中，并在整个容器上应用 .hover() 效果。这样，即使您离开按钮并开始悬停在菜单上，您仍然悬停在同一个容器上，因此它不会淡出。

演示：

$(".list-container").hover(function() {
  $(this).find(".dropdown-column").fadeToggle()
});

$(".dropdown-column").click( () => alert("Clicked") );

.nav {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.list-container .menuLink {
  border: blue dashed 1px;
  cursor: pointer;
}

.list-container {
  display: flex;
  flex-direction: column;
}

.dropdown-column {
  display: none;
  background: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <div class="list-container">
    <a class="menuLink">View List 1</a>
    <div class="dropdown-column">
      <div><a href="#">Item 1</a></div>
      <div><a href="#">Item 2</a></div>
      <div><a href="#">Item 3</a></div>
      <div><a href="#">Item 4</a></div>
    </div>
  </div>

  <div class="list-container">
    <a class="menuLink">View List 2</a>
    <div class="dropdown-column">
      <div><a href="#">Item 7</a></div>
      <div><a href="#">Item 8</a></div>
      <div><a href="#">Item 9</a></div>
    </div>
  </div>
</div>