Interact with two elements on hover of one

Question

I have a navbar. and a dropdown when hovering the navbar. PROBLEM: When hovering over the dropdown I want the navbar element to stay hovered. Here is a screenshot:

I want the SALES PROCESS background color to be the same as the bottom navbar there when hovering the bottom navbar. I can't seem to get this to work Here is my markup:

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

Here is my 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 on this would be awesome! Thanks

Answer 1

First, you can't .trigger("hover"). It is not a trusted event, as explained here.

Second, consider this: The hover state remains in effect as long as the mouse is over the element. So if you would be able to trigger a hover event on an element when it is not actually hovered, till when would you expect the element to remain in the hovered state?...

The solution:

Add your own .hover class and you can style it same as :hover.

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

You can then add/remove it just like any other class.

When showing the drop-down menu:

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

When hiding the drop-down menu:

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