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;
}
Share
Improve this question
edited Feb 22, 2013 at 16:20
rlemon
17.7k14 gold badges94 silver badges126 bronze badges
asked Feb 22, 2013 at 16:08
Robert MaillouxRobert Mailloux
3974 silver badges14 bronze badges
12
- 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
Reset to default 3Change 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.