触发Anchor ::在悬停在不同元素上的伪内容后

Question

问题非常简单 - 我在导航栏中有一个锚点，当它悬停/鼠标输入时，在CSS中的伪内容后生成一个箭头字符:::

然而，显然当鼠标移出然后将鼠标悬停在其下方的下拉菜单中的另一个锚点时，该角色会消失：

这是完成第一个悬停状态的基本CSS：

＆＃13;

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

由于这是对导航元素的充分利用，我希望在下拉菜单中触发单独的锚点时，通过Javascript保持那个::在内容显示在顶部锚点之后的某种方式在它下面。我知道jQuery不能访问::之后的元素，因为它们不是通过DOM表示的，但是我已经看到了通过在直接的Javascript中向文档头添加样式标签来创建:: after内容的例子，尽管我不相信这种方法会为我提供解决方案。是否有一种情况下，在一个元素上悬停可以使用Javascript触发内容之后的单独元素？::非常感谢您在这里提供的任何帮助。

更新：根据要求，这是相关的HTML代码段。注意我还修改了上面的CSS以反映下拉悬停状态。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>