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
}

可能有助于：替换：悬停到：活动

.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 {

移动鼠标时保持打开下拉菜单？

1 个答案: