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

Question

The issue is pretty straightforward -- I have an anchor in a nav that generates an arrowhead character as ::after pseudo content in CSS when hovering/mouseentering on it:

However, obviously that character goes away when mouseing out and then hovering on a different anchor in the dropdown menu below it:

Here's the rudimentary CSS to accomplish the first hover state:

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

Since this is a common enough utilization of navigation elements, I'm hoping there's some way via Javascript to keep that ::after content displayed on the top anchor when triggering a separate anchor in the dropdown menu below it. I'm aware that jQuery can't access ::after elements since they are not expressed via the DOM, but I have seen examples of creating ::after content via adding style tags to document heads in straight Javascript, though I don't believe that approach would provide me a solution. Is there a scenario where hovering on one element can trigger a separate element's ::after content using Javascript? Many thanks for any help you can provide here.

UPDATE: As requested, here is a relevant HTML snippet. Note I have also revised the CSS above to reflect the dropdown hover state.

 <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

Just move the hover part to the li instead:

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

Answer 2

Assuming nested structure of the submenu, what you need to do is move the hover effect to the same anchor, which shows the submenu on hover.

This way you will be hovering your anchor while hovering the submenu anchors.

Check out my (beautiful) snippet:

 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>