Question

我的页面上有一组简单的链接，其中一个链接在鼠标悬停时显示一个下拉菜单（请参见下图）。下拉子菜单在鼠标悬停在其所链接的链接上时可见（它有多快？），并由于display：block而固定在适当的位置（有关下拉内容，请参见下面的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）使下拉子菜单消失？我希望菜单在出现鼠标悬停事件之前保持固定。

感谢您对此提出任何想法。屏幕截图如下。

Answer 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;
}

这个想法是，当用户将鼠标悬停在带有“ dropdown”标签的项目上时，将显示该下拉菜单，并且由于该按钮是带有此标签的项目的子项，因此该按钮将起作用。下拉菜单一目了然，这同样适用于相同的机制。当用户将鼠标移到该区域之外时，它将“重置”。

这不是最好的方法，但是它可以工作，您可以随时更改内容并按自己的喜好对其进行样式设置。

jQuery插件可在鼠标悬停时关闭下拉菜单

1 个答案: