Activating Anchor's Pseudo Content on Hover of Another Element

Question

Activating Anchor's Pseudo Content on Hover of Another Element

I've encountered a straightforward issue - I have an anchor in a navigation menu that generates an arrowhead character as ::after pseudo content in CSS when hovering over it:

https://i.sstatic.net/Yhd9A.jpg

However, the arrowhead character disappears when moving the mouse away and then hovering on a different anchor in the dropdown menu below it:

https://i.sstatic.net/zOdbZ.jpg

Below is the basic CSS used to achieve the hover effect:

.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 navigation technique, I am looking for a way to use Javascript to keep the ::after content displayed on the top anchor when interacting with a separate anchor in the dropdown menu below it. jQuery cannot access ::after elements as they are not part of the DOM. However, some examples show creating ::after content by adding style tags to document heads in pure Javascript, though I'm unsure if this will solve my issue. Is there a method where hovering over one element can trigger the ::after content of another element using Javascript? Thank you for any assistance you can provide.

UPDATE: Here is a relevant HTML snippet as requested. I have also updated 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>

javascript html css pseudo-element

Answer 1

Answer №1

Shift the hover effect to the li element like this:

.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

Shift the hover effect to the li element like this:

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

Answer №2

To optimize the nested structure of the submenu, the hover effect should be shifted to the anchor that reveals the submenu upon hovering.

By doing this, the anchor will be hovered over simultaneously with the submenu anchors.

Take a look at this snippet for reference:

li { cursor: pointer; }
.outer ul { display: none; }
.outer:hover ul { display: block }
.outer { 
  display: inline-block;
  position: 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>

Answer 4

To optimize the nested structure of the submenu, the hover effect should be shifted to the anchor that reveals the submenu upon hovering.

By doing this, the anchor will be hovered over simultaneously with the submenu anchors.

Take a look at this snippet for reference:

li { cursor: pointer; }
.outer ul { display: none; }
.outer:hover ul { display: block }
.outer { 
  display: inline-block;
  position: 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>

Activating Anchor's Pseudo Content on Hover of Another Element

Answer №1

Answer №2

Similar questions

How to use Axios in Vue JS to access an array within a JSON object

What is the process of converting a file into a binary stream using Javascript?

Arranging Bootstrap columns based on click action

Emulate the selection process using element-ui and vue-test-utils

Angular is unable to iterate through a collection of ElementRef instances

Insert an item into a convoluted array

Tips for organizing the output of items from the .getJSON method

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

Convert the data into a format that is compatible with JavaScript

Automatically trigger a Bootstrap 5.2 modal when the page loads

Guide: Generating a DIV Element with DOM Instead of Using jQuery

Divide a single array into two separate arrays using React Native

Generating modal pages on the fly

Encountering an error message related to Bootstrap carousel: "Unable to read property 'offsetWidth' of undefined"

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Differences between using CSS custom properties in the :root selector versus the body/html tags

Creating Chaos in PrimeFaces Page Navigation with JavaScript

Is there a way to verify the functionality of DigitalOcean features using doctl before transitioning to a live environment?

Is there a way to ensure that neighboring divs have the same height as the tallest div in a row?

Error Alert: The combination of React and Redux-router is causing an unexpected issue. The reducer is expected to be a