时间戳

首页 > 解决方案 > 相对元素顶部的绝对元素悬停和点击问题

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

问题描述

我遇到了绝对元素的问题。该元素位于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中尝试：

标签： javascriptjqueryhtmlcss

解决方案

您具有基于的悬停样式.mnav和触发的 js 下拉列表，.mnav但它.floating-count-wrap是其子级，.mnav因此它触发了这些事件。

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

更新的 js 小提琴

js

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

css

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

推荐阅读