javascript - 悬停在不同元素上时触发 Anchor::after Pseudo Content

Question

这个问题非常简单——我在导航中有一个 anchor ，当鼠标悬停在它上面时，它会在 CSS 中生成一个箭头字符作为::after 伪内容:

但是，很明显，当鼠标移开然后悬停在其下方下拉菜单中的不同 anchor 上时，该字符会消失:

这是实现第一个悬停状态的基本 CSS:

.nav > li.dropdown > a:hover:after {
	display: block;
	position: relative;
	top: 2px;
	width: 100%;
	text-align: center;
	content: "\25B2";
	color: #ccc;
}

ul.dropdown-menu > li > a:hover {
	padding: 10px 15px;
	color: #0096d6;
}

由于这是对导航元素的一种足够普遍的使用，我希望有一些方法可以通过 Javascript 在其下方的下拉菜单中触发单独的 anchor 时将::after 内容显示在顶部 anchor 上。我知道 jQuery 无法访问::after 元素，因为它们不是通过 DOM 表示的，但我已经看到通过在直接 Javascript 中向文档头部添加样式标签来创建::after 内容的示例，尽管我没有相信这种方法会为我提供一个解决方案。是否存在悬停在一个元素上可以使用 Javascript 触发单独元素的::after 内容的场景？非常感谢您在这里提供的任何帮助。

更新:根据要求，这是一个相关的 HTML 片段。请注意，我还修改了上面的 CSS 以反射(reflect)下拉悬停状态。

<ul class="nav navbar-nav">
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tools and Information</a>        
		<ul class="dropdown-menu">
			<li><a href="/foo">Print Permanence</a></li>
			<li><a href="/foo2">Another Link</a></li>
		</ul>
	</li>
</ul>

Answer 1

只需将悬停部分移至 li 即可:

.nav>li:hover>a:after {
  display: block;
  position: relative;
  top: 2px;
  width: 100%;
  text-align: center;
  content: "\25B2";
  color: #ccc;
}

$('body').on('click', '.dropdown-toggle', function(e) {
  e.preventDefault();
  $('.dropdown-menu').toggleClass('active');
});

.nav li {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  margin: 0;
  padding: 0;
}

.dropdown-menu.active {
  display: block;
}

.dropdown-toggle {
  position: relative;
}

li {
  list-style: none;
  display: inline-block;
}

a {
  display: block;
  color: white;
  padding: 10px;
  width: 150px;
}

.nav>li>a {
  background: blue;
}

.dropdown-menu a {
  background: green;
}

.nav>li:hover>a:after {
  display: block;
  position: relative;
  top: 2px;
  width: 100%;
  text-align: center;
  content: "\25B2";
  color: #ccc;
}

ul.dropdown-menu > li > a:hover {
	padding: 10px 15px;
	color: #0096d6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tools and Information</a>
    <ul class="dropdown-menu">
      <li><a href="/foo">Print Permanence</a></li>
      <li><a href="/foo2">Another Link</a></li>
    </ul>
  </li>
</ul>