javascript - 当鼠标移开时保持下拉菜单打开？

Question

我在 codeigniter 站点中使用 zurb Foundation 4，在桌面版本中，我将登录右上角作为下拉菜单，但是当鼠标移离下拉菜单的内容时，它会关闭，我想了解是否可以保持打开状态，除非用户单击页面上的其他位置。

请参阅我在基金会网站文档上解释的示例:http://foundation.zurb.com/docs/components/top-bar.html

我只需要编辑该示例，以便当鼠标移开时下拉列表不会关闭。

我使用下面的基本代码:

<nav class="top-bar">
 <ul class="title-area">
 <!-- Title Area -->
<li class="name">
  <h1><a href="test">M450N</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>

<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
  <li class="divider"></li>
  <li class="active"><a href="about">About</a></li>
  <li class="divider"></li>
  <li><a href="index">Events</a></li>
  <li class="divider"></li>
  <li><a href="#">Music</a></li>      
</ul>

<!-- Right Nav Section THIS IS THE PROBLEM SECTION -->
<ul class="right">
<li class="divider"></li>
    <li class="has-dropdown"><a href="#">Login</a>
    <ul class="dropdown">
      <li class="has-dropdown">
      <div class="panel">
      <input type = "text" value = "Username"/><br />
      <input type = "text" value = "Password"/><br />
      <input type = "Submit" value = "Login"/></div>
     </li>
 </ul>
 </section>
 </nav>

基础 CSS: http://pastebin.com/iRpqtY2G

主要CSS:http://pastebin.com/fBExPY1j

Answer 1

您可以使用 CSS 属性“:active”代替“:hover”

使用

ul.dropdown:active {
    // css properties
}

而不是

ul.dropdown:active {
    // css properties
}

可能有助于: 将 :hover 替换为 :active

.top-bar-section ul li > a:hover {
.top-bar-section ul li > a.button:hover {
.top-bar-section ul li > a.button.secondary:hover {
.top-bar-section ul li > a.button.success:hover {
.top-bar-section ul li > a.button.alert:hover {
.top-bar-section li a:not(.button):hover {

至

.top-bar-section ul li > a:hover,.top-bar-section ul li > a:active {
.top-bar-section ul li > a.button:hover,.top-bar-section ul li > a.button:active {
.top-bar-section ul li > a.button.secondary:hover,.top-bar-section ul li > a.button.secondary:active {
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:active {
.top-bar-section ul li > a.button.alert:hover,.top-bar-section ul li > a.button.alert:active {
.top-bar-section li a:not(.button):hover,.top-bar-section li a:not(.button):active {

此代码还可以帮助您添加“Onclick”功能。如果您只需要“onclick”功能，请使用下面的提及行

.top-bar-section ul li > a:active {
.top-bar-section ul li > a.button:active {
.top-bar-section ul li > a.button.secondary:active {
.top-bar-section ul li > a.button.success:active {
.top-bar-section ul li > a.button.alert:active {
.top-bar-section li a:not(.button):active {