I have a dilemna. I just learned how to use the add and remove class functions in jQuery but when you add a class it is not automatically removing the existing class. My problem is this. I have a button with a class on it that contains a background color. When I hover that button, I want the NEW class to take precedence over the old one, so in essence, I have to remove the old class. I just do not know where to begin. If I try to remove, add,remove, add, the hover doesnt seem to handle it all in one call. Can someone give me ideas?

I have two classes one is called '.ul.nav a' the other is '.work.

$('ul.nav a').hover(
  function () {     
    $(this).addClass('work');
  },
  function () {
    $(this).removeClass('work');
  }
);

Here is the current class:

ul.nav a {
  display: block;
  background-color:#B2B2D9;
  margin-right:2%;
  margin-bottom:5%;
  margin-left:1%;
  text-decoration:none;
  border:3px #e6e6e6 ridge;
  padding: 2%;
  border-radius: 15px;
}

Which I would like to change to

.work {
  color:white;
  background-color:red;
  position:absolute;
  top:100px;
  left 230px;
}

I have a dilemna. I just learned how to use the add and remove class functions in jQuery but when you add a class it is not automatically removing the existing class. My problem is this. I have a button with a class on it that contains a background color. When I hover that button, I want the NEW class to take precedence over the old one, so in essence, I have to remove the old class. I just do not know where to begin. If I try to remove, add,remove, add, the hover doesnt seem to handle it all in one call. Can someone give me ideas?

I have two classes one is called '.ul.nav a' the other is '.work.

$('ul.nav a').hover(
  function () {     
    $(this).addClass('work');
  },
  function () {
    $(this).removeClass('work');
  }
);

Here is the current class:

ul.nav a {
  display: block;
  background-color:#B2B2D9;
  margin-right:2%;
  margin-bottom:5%;
  margin-left:1%;
  text-decoration:none;
  border:3px #e6e6e6 ridge;
  padding: 2%;
  border-radius: 15px;
}

Which I would like to change to

.work {
  color:white;
  background-color:red;
  position:absolute;
  top:100px;
  left 230px;
}

• javascript
• jquery
• addclass

• Is the pre-existing class always the same class? – Blazemonger Commented Feb 22, 2013 at 16:09
• Could you give an example of the HTML you'd like before/after a hover event? – Tom Walters Commented Feb 22, 2013 at 16:10
• 2 You should probably be taking advantage of the "cascading" part of CSS. If you want a new class' properties to override an old class, make sure your new class (a) is more specific and (b) is listed AFTER the old one in your CSS document. – Blazemonger Commented Feb 22, 2013 at 16:12
• 1 @RobertMailloux: Show your html code – Siva Charan Commented Feb 22, 2013 at 16:13
• 1 You're wele. Don't forget to accept your favorite answers to your questions, to encourage others to help you in the future. – Blazemonger Commented Feb 22, 2013 at 16:22

5 Answers 5

Change your CSS for .work to ul.nav a.work to make it more specific. Then it will override the old styles.

I'd rethink your approach to use CSS ':hover' selector instead of JS. Something like

ul.nav a {
    background-color: blue;
}
ul.nav a:hover {
    background-color: red;
}    

This is an issue with your CSS precedence. Change your CSS to:

ul.nav a.work {
    color:white;
    background-color:red;
    position:absolute;
    top:100px;
    left 230px;
}

Alternatively as this is just for hover, you can remove your javascript and change your CSS to:

ul.nav a:hover {
    color:white;
    background-color:red;
    position:absolute;
    top:100px;
    left 230px;
}

As @Blazemonger implies in his ment, specificity and the CSS cascade are stopping the .work class from taking effect: Change your .work selector in the CSS to ul.nav a.work to ensure it will take precedence.

Best practice: let your styles be handled by CSS when possible. Instead of .work use this:

ul.nav a:hover {
    color: white;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 230px;
}

And no need of javascript code.