javascript - Hide::before 悬停在事件元素上

Question

我有这样的结构:

<nav>
    <ul>
        <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li>
        <li><a href="javascript:void(0)" class="menuitem">about</a></li>
        <li><a href="javascript:void(0)" class="menuitem">contact</a></li>
    </ul>
</nav>

当 .active 可以是三者之一时(它只是突出显示用户所在的页面)。 问题是我正在通过 ::before 选择器在 .active 元素上创建一个“箭头”突出显示，我希望如果用户将鼠标悬停在任何元素上， ::before 仅在悬停时消失。

它是这样的:

http://i.imgur.com/cIZXHEN.png

悬停时看起来像这样(看到问题了吗？现在悬停时有两个箭头，我希望箭头只位于悬停的箭头上并将其隐藏在 .active 上，在 mouseout 之后箭头返回到 .active 一个):

http://i.imgur.com/JTLKNFK.png

这是我的CSS:

header nav {
  float: right;
  font-family: 'avenir_lt_std65_medium';
  text-transform: uppercase;
  text-align: right;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000000;
}
header nav ul li a.active::before {
  content: ">> ";
}
header nav ul li a:hover:before {
  content: ">> ";
}

Answer 1

这会成功吗？

header nav {
  float: right;
  font-family: 'avenir_lt_std65_medium';
  text-transform: uppercase;
  text-align: right;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000000;
}
nav ul li a.active::before {
  content: ">> ";
}
nav ul:hover li a::before {
  content: none;
}
nav ul li a:hover:before {
  content: ">> ";
}

<nav>
    <ul>
        <li><a class="menuitem active">see all projects</a></li>
        <li><a class="menuitem">about</a></li>
        <li><a class="menuitem">contact</a></li>
    </ul>
</nav>