I realize this is about a year old, but the reason the add/remove class is more appropriate sometimes is if you have more than one trigger on a page for the same element. It’s simply more dummy-proof!
howcome it doesn’t work with .click but it works with hover? it doesn’t make sense. what i want is when you hover over a list item, then there’s the hover color, then when you click i have a div appear (sliding down) then i want the LI #Show to have a yellow background-color then when clicked again the div goes away Display:hidden) and then i want the LI#Show to go back to its regular state. but i canonly get so far. where if the li is clicked once, then the div appears and the li background goes yellow, but once i click it again the div dissappears but the color does not go away.
It could be that this code doesn’t work with click because it’s designed to use the old .hover() syntax, which requires two functions while .click() requires one. To start with, the method to use if you’re using jQuery 1.7 or higher is now .on() . For what you’re looking for, the right code might be something like this jsfiddle:
I am trying to remove hover only from a smallButton class without the whole class. I am trying just to remove button.smallButton:hover and keep .smallButton in use. Is this possible:
Hey, this was so great!! I am super excited about figuring this out. I used this (in part) to build a menu that I really needed to add to in SharePoint.
I needed a toggle for the active class and this gave me the framework to get that done.
if it said $ is not defined use this
jQuery(document).ready(function( $ ) {
$(‘.menu-item-has-children’).hover(
function(){ $(this).addClass(‘open’); },
function(){ $(this).removeClass(‘open’); }
);
isn’t it easier to use “toggleClass()” ????
There are many different ways to accomplish the same goal, its however invauable to know to many!
I realize this is about a year old, but the reason the add/remove class is more appropriate sometimes is if you have more than one trigger on a page for the same element. It’s simply more dummy-proof!
absolutly :
$(‘.element’).hover(
function(){$(this).toggleClass(‘classname’);}
);
Thank you :)
Simple but great code snippet.
Thnx…
Thanks for the post, this works well when you want to be cross browser compatible and remove any :hover class’ from your CSS
You saved my life. thx
howcome it doesn’t work with .click but it works with hover? it doesn’t make sense. what i want is when you hover over a list item, then there’s the hover color, then when you click i have a div appear (sliding down) then i want the LI #Show to have a yellow background-color then when clicked again the div goes away Display:hidden) and then i want the LI#Show to go back to its regular state. but i canonly get so far. where if the li is clicked once, then the div appears and the li background goes yellow, but once i click it again the div dissappears but the color does not go away.
It could be that this code doesn’t work with click because it’s designed to use the old .hover() syntax, which requires two functions while .click() requires one. To start with, the method to use if you’re using jQuery 1.7 or higher is now .on() . For what you’re looking for, the right code might be something like this jsfiddle:
http://jsfiddle.net/CodeJunkie/nMjMX/
thank you, I always forget this way.
I’m new to javascript–could you post or point me to a demo of this in action?
I tried replacing the #elm with the ID of my div, and the ‘hover’ with my new class, like this:
Then I styled the new class. How did I break it?
Tim, you’ll find that you are applying both the add and remove class at the same time here…
You’ll need to apply the remove class on a different event…
@Tim: It’s jQuery. Try this:
You need to make sure that jQuery library is referenced on the page (see code below) and that the aforementioned code comes AFTER it.
Then make sure that your HTML code contains something like this:
So, when you open the web page, and hover your mouse over the div, it’d look like this:
And when move your away from the div, it’d again become:
Similarly, you can also target classes:
In which case, your HTML code should look like:
@PeterGarrett: Are you sure? I think we need both lines, otherwise it doesn’t seem to work. ↑
Thanks @Aahan
it’s very helpful to me …
I think the removeClass should come first in order to remove any previous added class first before adding class.
@erick jQuery’s addClass handles that logic, it won’t add if the class exists already.
I am trying to remove hover only from a smallButton class without the whole class. I am trying just to remove button.smallButton:hover and keep .smallButton in use. Is this possible:
jQuery(document).ready(function($){
$(‘#buttonId’).hover(
function(){ $(this).removeClass(‘button.smallButton:hover’)}
)
});
a:hover{ color:#666;}
Hey, this was so great!! I am super excited about figuring this out. I used this (in part) to build a menu that I really needed to add to in SharePoint.
I needed a toggle for the active class and this gave me the framework to get that done.
If you want to toggle between 2 different classes rather than add and remove a single class as I did in my shopping basket page then this works…
(Note: I also have similar code for ‘fa-minus-square’ and ‘fa-minus-square-o’ on my ‘#quantity_less_’ + line_item_id control)
if it said $ is not defined use this
jQuery(document).ready(function( $ ) {
$(‘.menu-item-has-children’).hover(
function(){ $(this).addClass(‘open’); },
function(){ $(this).removeClass(‘open’); }
);