Question

我有这段代码：https://codepen.io/anon/pen/QdQEQW

正如您所看到的，如果您将鼠标悬停在＆＃34; Dropdown＆＃34;它还会改变＆＃34; V＆＃34;的背景颜色，即：部分之后。我不要那个。简单。但我无法完成它。我用Google搜索并尝试过但我只是想弄清楚如何。

我尝试了很多不同的变体，例如

.onclick-menu:hover.onclick-menu:after {
background: blue;
}

.onclick-menu:after:hover {
background: blue;
}

.onclick-menu:hover > onclick-menu:after:hover {
background: blue;
}

.onclick-menu:hover + onclick-menu:hover:after {
background: blue;
}

Answer 1

在我看来，你想要以下内容：

＆＃13;

#top {
  background: black;
  line-height: 39px;
}
#top nav a {
  color: #21262F;
  padding: 10px 15px;
  background: green;
}
#top nav a:hover {
  background: red;
}
.onclick-menu {
  position: relative;
  display: inline-block;
}
.onclick-menu:after {
  content: "V";
  background: green;
  margin-left: -4px;
  padding: 8px 10px;
}
.onclick-menu:hover:after {
  background: green;
}
.onclick-menu:focus {
  outline: none;
  pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.onclick-menu-content {
  position: absolute;
  z-index: 1;
  background: #F4F4F4;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.5s;
}

＆＃13;

<div id="top">

  <nav>
    <a href="#">Hey</a>

    <div tabindex="0" class="onclick-menu">
      <a href="#">Dropdown</a>
      <ul class="onclick-menu-content">
        <li>Look, mom</li>
        <li>no JavaScript!/li>
          <li>Pretty nice, right?</li>
      </ul>
    </div>


    <a href="#">Support</a>
  </nav>

</div>

＆＃13;

为了清楚起见，这是一个：

.onclick-menu:hover:after {
  background: green;
}

我不明白为什么你首先在该选择器中添加.onclick-menu两次。它是同一项目的伪元素，因此您不需要重复父项。

：after和：hover问题，不影响整个元素

1 个答案: