I am using mouseenter and mouseleave events on some elements to change their appearance. I am able to do so using either of the following two strategies:

1. $(this).css('someProperty','someValue') to add and then $(this).removeAttr('style') to remove
2. $(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove

What is the best way to do so?

I am using mouseenter and mouseleave events on some elements to change their appearance. I am able to do so using either of the following two strategies:

1. $(this).css('someProperty','someValue') to add and then $(this).removeAttr('style') to remove
2. $(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove

What is the best way to do so?

• javascript
• jquery
• css

7 Answers 7

Definitely option 2. Styles should be defined in the stylesheet.

There's also toggleClass, which removes the class if it's there, but adds it if it's missing.

Note: toggleClass also lets you pass in a Boolean as the second argument, telling it whether to add or remove it (regardless of whether it currently has that class applied), so:

$(this).toggleClass('active', true);

is exactly equivalent to:

$(this).addClass('active');

This is very handy when you have a Boolean in your code already. So instead of this:

if (isUserActive()) {
    $(this).addClass('active');
} else {
    $(this).addClass('active');
}

You could just do this:

$(this).toggleClass('active', isUserActive());

Option 2 if you must do it in JavaScript, but for modern browsers you may be able to achieve what you're after entirely in CSS using :hover pseudo-classes.

I'd strongly remend addClass()/removeClass(), since you can add, remove and change a whole swathe of properties with minimal jQuery.

Whereas the css() method requires you, or rather the script, to keep track of what should be changed to reflect the aesthetic change(s) to convey programmatic interaction, coupling that with the attr() method and removing the style attribute will remove all styles, even those you want the element to retain, which requires you to reassign those properties.

So, basically, option 2 is efficient, and option 1 creates unnecessary work.

There is, of course, always toggleClass(), which can promote further efficiency.

Unless you need to dynamically generate any of the CSS property values you're better of separating the styles from the javascript. So use classes instead of direct css styles.

.addClass and .removeClass is the best way because you can style you changes with your CSS ...so after a while you can easily redesign your site.

Second one is best because normally style will is mon for different elements, it will generic and adding removing is good pared with adding attribute one by one.

$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove

If you are calling this function in more than one element I suggest you to use the second one. If you needed to change the appearance again later, then you have to edit only within the css class, not in all elements