Implement a hover effect on a specific class targeting a nested element using JavaScript

Question

Implement a hover effect on a specific class targeting a nested element using JavaScript

Is there a method to apply a class that modifies rules for a child element using Javascript? I have successfully added it with CSS but am struggling to do the same with Javascript. Removing the class in JS is easy by referencing the classname before the hover pseudo-class, but re-adding it after removal doesn't seem to work properly. It could be a syntax issue, but I'm unable to find the correct solution. Any suggestions?

function hideTooltip(){
  elementName.classList.remove('tooltip');
}

function showTooltip(){
  elementName.classList.add('tooltip');
}

.tooltip:hover .tool-name{
  display: inline;
}

UPDATE

Upon further review, it appears that it was indeed functioning correctly. The problem stemmed from some specificity issues preventing it from taking effect when trying to reapply it.

javascript css

Answer 1

Answer №1

When you utilize the functions add or remove, you are manipulating elements and not classes.

For adding or removing classes, it is recommended to use addClass, removeClass, or toggleClass

function hideTooltip(){
  elementName.classList.removeClass( 'tooltip' );
}

function showTooltip(){
  elementName.classList.addClass( 'tooltip' );
}

Answer 2

When you utilize the functions add or remove, you are manipulating elements and not classes.

For adding or removing classes, it is recommended to use addClass, removeClass, or toggleClass

function hideTooltip(){
  elementName.classList.removeClass( 'tooltip' );
}

function showTooltip(){
  elementName.classList.addClass( 'tooltip' );
}

Implement a hover effect on a specific class targeting a nested element using JavaScript

Answer №1

Similar questions

Validation within nested Joi schemas

Is there a way to verify the availability of an authenticated resource without triggering a pop-up for credentials in the browser?

Escaping from its container, text breaks free with the power of CSS

Highlighting of tab CSS is not persistent when switching tabs or clicking elsewhere on the page

Guide to displaying API data in HTML format

How can I create a dashed border for a pie chart using highcharts?

trouble with synchronizing multiple requests in node express mysql

Show just a single error message if there are two validation errors present

Recording web browser network traffic using JavaScript

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

What is the best way to retrieve a {collection object} from a JavaScript map?

When is the best time to access user credentials in the FirebaseUI authentication process?

Change the color of the border to match the background color

selectors that seem to be floating

Using React Native to dynamically change color based on API response

When attempting to send an email using the emailjs.send function, an unexpected error occurred showing the URL https://api.emailjs.com/api/v1.0/email/send with a

Tips for concealing the angular component depending on a specific circumstance

When the mouse hovers over, include a fade-in effect for the image

Update the contents of a webpage using AJAX

Is it usual for the container to overflow with div content?