将鼠标悬停在不同元素上时触发锚点 :: 在伪内容之后

Question

问题非常简单——我在导航中有一个锚点，它在 CSS 中生成一个箭头字符作为 ::after 伪内容，当 hovering/mouseentering 在其上时：

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

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

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

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

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

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

<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: "B2";
  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: "B2";
  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>

Answer 2

假设子菜单的嵌套结构，你需要做的是将悬停效果移动到同一个锚点，悬停时显示子菜单。

这样您将在悬停子菜单锚点的同时悬停您的锚点。

看看我的（漂亮的）片段：

li { cursor: pointer; }
.outer ul { display: none; }
.outer:hover ul { display: block }
.outer { 
  display: inline-block;
  positon: relative; 
  padding: 4px;
}
.outer span { background-color: #007bff; } 
.outer ul {
  position: absolute;
  top: 50px; /* li height + padding + actual distance */
  background-color:#007bff;
}
.outer ul::before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #007bff transparent
}

<ul>
  <li class="outer">
        <span>Abcd</span>
        <ul>
           <li>abcd</li>
           <li>efgh</li>
           <li>ijkl</li>
        </ul>
  </li>
  <li class="outer">Efgh</li>
  <li class="outer">Ijkl</li>
</ul>

将鼠标悬停在不同元素上时触发锚点 :: 在伪内容之后

Triggering Anchor ::after Pseudo Content When Hovering Over Different Element

html

javascript

css

pseudo-element