Question

我有一个菜单栏，其中包含一些下拉图标。其中一些菜单下有子菜单，其中一些菜单有子菜单。

例如以下是子子菜单的示例

 Archives
  |
  |____ 2017
  |      |_______ Award
  |      |_______ Pictures
  |
  |____ 2016

当我点击存档菜单时，我可以在下拉菜单中的子菜单中看到2017年和2016年。

当我将鼠标悬停在奖励和图片上时，但当我悬停在奖励或图片上时，子子菜单会消失。例如如果我将悬停在奖励上，那么奖励只是消费者或我可以说字体颜色变白，因为我的背景是白色的，当我将背景改变为其他颜色然后我可以看到图标。所以它将颜色变为白色，我怎么能阻止它。这是我的代码：

$(document).ready(function() {
  $('.dropdown-menu a.test').on("hover", function(e) {
    $("div.li2017Sub").show();
  });
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="liPastEvents" class="dropdown" runat="server">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Past Events<i class="fa fa-angle-down"></i></a>
  <ul class="dropdown-menu">
    <li id="li2017"><a class="test" href="#">2017</a></li>
    <ul>
      <div class="li2017Sub" style="display: none ;">
        <li><a href="http:\\google.com">Pictures</a></li>
        <li><a href="#">Award Winners</a></li>
      </div>
    </ul>
    <li id="li2016" runat="server"><a href="/apps/abstractBook/abstractBook2017.aspx">2016</a></li>
  </ul>
</li>

Answer 1

创建css类，如：

.abc:hover { color: red; }

然后将此类添加到<a>元素中的<li>标记中，如：

<li><a class="abc" href="http:\\google.com">Pictures</a></li>
<li><a class="abc" href="#">Award Winners</a></li>

链接在菜单栏上悬停时消失

1 个答案: