相对元素悬停和点击问题顶部的绝对元素

Question

我遇到了绝对元素的问题。这个元素是floating-count，位于导航的顶部。

问题是当我将鼠标悬停在floating-count元素上时，下拉箭头也在盘旋（它应该假设在导航悬停时悬停或改变颜色）。然后，当我点击floating-count元素时，下拉导航也显示（它应该显示何时单击导航）。

我尝试更改（使用它，因为我希望看到解决方案）并将z-index添加到元素但我感到困惑。

代码在这里：

$('.mnav').on('click', function() {
  if ($(this).children('.dpdown').is(":hidden")) {

    console.log('show');
    $(this).children('.dpdown').slideDown("fast");
  } else {
    $(this).children('.dpdown').slideUp("fast");

    console.log('hide');
  }
});

li.mnav,
.navigation ul.right li.mnav {
  display: inline-block;
  position: relative;
}

a.text-link,
.navigation ul.right li.mnav a.text-link {
  color: #fff;
  font-size: 15px;
  line-height: 15px;
  padding: 14px 24px;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-arrow {
  background: yellow;
}

.nav-arrow:after {
  top: 40%;
  right: 0;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #1b6b00;
  border-width: 8px;
}

.floating-count {
  position: absolute;
  z-index: 1;
  border-radius: 20px;
  background: red;
  padding: 4px 8px;
  top: -12px;
  right: -2px;
  text-decoration: none;
  color: #FFF;
}

.dpdown {
  position: absolute;
  left: 0;
  top: 50px;
  width: 300px;
  display: none;
  z-index: 1;
}

.dpdown ul li a {
  font-size: 12px;
  color: #eaf2ac;
  padding: 5px 30px;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}

.dpdown ul {
  list-style-type: none;
  background-color: #1b6b00;
  text-align: left;
  margin: 0;
  padding: 4px 0;
}

ul.right {
  list-style-type: none;
  background-color: #208100;
  text-align: center;
  margin: 0;
  padding: 0;
  float: left;
  border-radius: 5px;
}

ul.right li.mnav:hover,
.navigation ul.right li.mnav a.text-link:hover {
  color: #ffea00;
}

.dpdown:hover>.nav-arrow:after {
  color: #ffea00;
}

.navigation .mnav:hover>.nav-arrow:after {
  border-top-color: #ffea00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
  <ul class="right">
    <li class="mnav">

      <a href="javascript:;" class="text-link">Drop Down</a><span class="nav-arrow"></span>
      <span class="floating-count-wrap"><a class="floating-count" href="/#count">2</a></span>

      <div class="dpdown">
        <ul>
          <li><a href="/">A</a></li>
          <li><a href="/">B</a></li>
          <li><a href="/">C</a></li>
          <li><a href="/">D</a></li>
        </ul>
      </div>
    </li>

  </ul>

</div>

在jsfiddle中尝试：

Answer 1

你有基于.mnav的悬停样式和由.mnav触发的js下拉，但.floating-count-wrap是.mnav的孩子，因此它触发了这些事件。

我调整了css和js以使用.mnav .test-link作为选择器。我还必须使css规则使用兄弟而不是父选择。同样地，在js中，下拉列表的选择器不再是$(this)的孩子，所以我更新到$(this).parent()

updated js fiddle

JS

$('.mnav .text-link').on('click', function() { ... });

CSS

.navigation .mnav .text-link:hover + .nav-arrow:after { ... }