Question

我有一个导航栏。和鼠标悬停在导航栏上时的下拉列表。问题：当鼠标悬停在下拉列表上时，我希望导航栏元素保持悬停状态。这是一个截图：

我希望SALES PROCESS背景颜色与悬停在底部导航栏时的底部导航栏相同。我似乎不能让它工作这是我的标记：

  <ul class="items">
    <% if current_user.try(:admin?) %>
      <li><%= link_to "Users", admin_users_path, class: current_path_class(admin_users_path) %></li>
      <li><%= link_to "Companies", admin_companies_path, class: current_path_class(admin_companies_path) %></li>
    <% end %>
    <% if current_user.present? %>
      <li class="navbar-sales-process"><%= link_to "Sales Process", authenticated_root_path %>
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </li>
      <li><%= link_to "Resource Center", current_user.digital_lizard_url, class: current_path_class(current_user.digital_lizard_url) %></li>
      <li><%= link_to "Training", training_url, class: current_path_class(training_url) %></li>
      <li><%= link_to "Submissions", submissions_url, class: current_path_class(submissions_url) %></li>
      <li><%= link_to "Account Access", links_account_access_path, class: current_path_class(links_account_access_path) %></li>
      <li>
        <%= link_to destroy_user_session_path, class: "sign-out", method: :delete do %>
          <%= fa_icon 'sign-out' %>
        <% end %>
      </li>
    <% end %>
  </ul>

  <ul class="navbar-topics navbar-sales-process invisible">
    <% Topic.all.sort.each do |topic| %>
      <li><%= link_to topic.name, topic_path(topic.slug), class: navbar_current_topic(topic_path(topic.name)) %></li>
    <% end %>
  </ul>

这是我的CSS：

  .items {
    font-family: museo;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 41px;
    margin-left: auto;
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
    li {
      padding: 22px 10px 0;
      display: block;
      a {
        font-family: museo;
        color: $white-color;
        line-height: 15px;
        font-size: 13px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: -0.1px;
        text-decoration: none;
        text-transform: uppercase;
      }

      .current {
        font-weight: bold;
      }
    }
  }

JS：

$(document).on("turbolinks:load", function() {
  $(".navbar-sales-process").hover(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if ($(".main").hasClass("openDropdown")) {
      return $(".main").trigger("hover");
    } else {
      $(".navbar-topics").removeClass("invisible");
      $(".navbar-topics").addClass("popup")
      return $(".main").addClass("openDropdown");
    }
  });

  $(document).on("hover", ".main.openDropdown", function() {
    $(".navbar-topics").addClass("invisible");
    return $(".main").removeClass("openDropdown");
  });
});

Anyhelp对此非常棒！感谢

Answer 1

首先，你不能.trigger("hover")。如here所述，它不是受信任的事件。

其次，请考虑这一点：只要鼠标悬停在元素上，悬停状态就会一直有效。因此，如果你在一个元素没有实际悬停时设法触发悬停状态，那么你希望该元素何时保持在悬停状态？...

解决方案：

添加您自己的.hover课程，您可以将其设置为:hover。

a:hover, a.hover { color: yellow; }

然后，您可以像任何其他类一样添加/删除它。

显示下拉菜单时：

$(".navbar-sales-process").addClass("hover");

隐藏下拉菜单时：

$(".navbar-sales-process").removeClass("hover");

在悬停一个时与两个元素交互

JS：

1 个答案:

解决方案：