0

我的页面上有一组简单的链接，其中一个链接在鼠标悬停时显示下拉菜单（见下图）。下拉子菜单在鼠标悬停在它所附加的链接上时变得可见（它有多快？），并且由于 display: 块而保持固定（请参阅下面的 css 代码以获取下拉内容）。当我将鼠标悬停在页面上的任何主要链接（不是子链接）上时，我希望该下拉子菜单消失，包括被下拉菜单部分隐藏的链接。为此，我想我需要 jQuery，但我还没有找到合适的插件。

这是链接和下拉菜单的 html 代码： 

<div class="left_links">
<div class="C1"><br><button class="button_01" onmouseover="ShowText(1)">What is It?</button></div>

<div class="C1"><br>
<div class="dropdown">
<button class="button_01" onmouseover="ShowText(5)">How fast is It? </button>
<div class="dropdown-content">
   <div class="C1"><button class="button_dropdown" onclick="ShowText(101)">Sub_Link 01</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(102)">Sub_Link 02</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(103)">Sub_Link 03</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(104)">Sub_Link 04</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(105)">Sub_Link 05</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(106)">Sub_Link 06</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(107)">Sub_Link 07</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(108)">Sub_Link 08</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(109)">Sub_Link 09</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(110)">Sub_Link 10</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(111)">Sub_Link 11</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(112)">Sub_Link 12</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(113)">Sub_Link 13</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(114)">Sub_Link 14</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(115)">Sub_Link 15</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(116)">Sub_Link 16</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(117)">Sub_Link 17</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ShowText(118)">Sub_Link 18</button></div>
</div>
</div>
</div>

<br><br>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(2)">How does It work?</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(3)">Pricing</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(4)">Support</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(5)">FAQs</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(6)">Documentation</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(7)">Terms of Service</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(8)">Privacy</button></div>
<div class="C1"><br><button class="button_01" onmouseover="ShowText(13)">About It</button></div>
</div>

这是链接和下拉菜单的css代码： 

.dropdown {
    position: absolute;
    z-index: 100;
    display: inline-block;
    overflow: hidden;
}

.dropdown-content {
    display: block;
    background-color: rgb(105,105,105);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 15px;
    margin-left: 40px;
    margin-top: 0px;
    font-family: camphorW04-Thin,calibri,arial;
    font-size: 16pt;
    max-height: 30%;
}

.button_dropdown {
    background-color: rgb(105,105,105);
    border: none;
    color: #DBDBDB;
    font-family: camphorW04-Thin,calibri,arial;
    font-size: 12pt;
    text-align: left;
    text-decoration: none;
    cursor: ptr;
}

.button_dropdown:hover {color: white;}.left_links {
    grid-column: 5 / 20;
    grid-row: 5 / 15;
    text-align: left;
}

.C1{
    color:#DBDBDB;
    font-family: sans-serif;
    font-size: 14pt;
    text-indent: 0px;
    width: auto;
    margin: auto;
}

.button_01 {
    background-color: #555555;
    border: none;
    color: rgb(255,255,255);
    text-align: left;
    text-decoration: none;
    font-size: 12pt;
    cursor: pointer;
}

.button_01:hover { color: white;}

综上所述，我的问题是：我可以使用什么 jQuery 插件（或 css 或 JavaScript）使下拉子菜单在任何主链接的鼠标悬停时消失？我希望菜单在出现鼠标悬停事件后保持固定。

感谢您对此的任何想法。截图如下。

在此处输入图像描述

4

1 回答 1

1

您不需要 jquery 来满足您的目的，纯 CSS 就可以了。您确实必须稍微更改 HTML 以使其正常工作。一个很好的例子是来自 w3 学校的那个（https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button）。

因为我目前没有任何工作要做，所以我也修复了你的（如果这是你想要的）：https ://jsfiddle.net/2w45tk0a/10/

这种变化最重要的部分是：

dropdown:hover .dropdown-content {
  display: block;
}

这个想法是，当用户将鼠标悬停在具有“下拉”标签的项目上时，下拉菜单会显示，并且由于该按钮是具有此标签的项目的子项，因此它将起作用。一旦下拉列表可见，这也适用于相同的机制。当用户将鼠标移出该区域时，它会“重置”。

这可能不是最好的方法，但它很有效，您可以随时更改内容并根据需要设置样式。

于 2018-08-28T22:49:16.827 回答