OnMouseOver="$('.class') .hover
(function(){
$(this).addClass('.hoverclass');
}, function() {
$(this).removeClass('.hoverclass');
});"
what am I doing wrong?
Add a comment
|
4 Answers
If you're trying to do the hover thing on all elements that have the class "class", then:
$('.class').hover(function() {
$(this).toggleClass("hoverclass");
});
Changes from yours:
- It's not a string. I'm not sure where your quote came from, but I'm thinking it was an HTML attribute. You would just put this somewhere during page load, like within a
readyhandler. - You don't include the leading dot when you're calling
addClass/removeClass/toggleClass. The dot isn't part of the class name. - May as well use
toggleClass, since that's what it's for.
Possibly worth mentioning that you don't need jQuery or JavaScript for this unless you need to support IE6. CSS already has this, the :hover pseudo-class. So you can put your styles there rather than in a separate hoverClass, e.g.:
.class:hover {
text-decoration: underline;
color: blue;
}
...would turn an element with class "class" blue with an underline when the mouse was over it.
In IE6 this only works on a elements; in IE7 upward and nearly all other browsers, it
works on all elements.
Edit: In your note below, you say you only want to do this to one element (at least, I think that's what you're saying). You can do that by uniquely-identifying the element — either by where it is, or by using an id attribute. So for instance, to only do this for the element with the id "foo":
$('#foo').hover(function() {
$(this).toggleClass("hoverclass");
});
(And that holds for the CSS solution as well:
#foo:hover {
/* ...style rules here... */
}
4 Comments
T.J. Crowder
@veidt: Just one element? Or one element at a time? Either way, the updated answer should help (the original answer did one element at a time; the update lets you do one element, period).
veidt
I changed it to OnMouseOver= $('.item').hover(function() { $(this).toggleClass("hover"); }); And it's still not working, all i want is to have a background hover on the item class using the hover class. :/
T.J. Crowder
@veidt: See the examples, you don't want OnMouseOver at all.
T.J. Crowder
@veidt: In case you haven't used JSBin before: As you move your mouse over any of those examples, you should see an "Edit in jsbin" button appear in the upper right-hand corner. Just click that to see the source of the samples (the "JavaScript" bit on the left can be thought of as a linked .js file). You can also enter "edit" mode simply by adding
/edit to the end of any of the URLs, so for instance, to edit jsbin.com/icixu4, use jsbin.com/icixu4/edit.You do not need to add jQuery commands to an onMouseOver event as a string. You, rather, execute jQuery, after DOM finishes rendering, and jQuery attaches and handles all the functions and events so you don't have to.
jQuery(document).ready(
function() {
// this function will be executed when DOM is ready
// ...and this will attach your hover functions to
// all the elements that have class 'class'
jQuery('.class').hover(
function(){
jQuery(this).addClass('hoverclass');
},
function() {
jQuery(this).removeClass('hoverclass');
}
);
}
);
Comments
Remove the quotes from the right hand side of the expression. By having the quotes around, you are creating a String and not evaluating the expression. Also may I ask why you are storing the jQuery result object?
Comments
As T.J. Crowder points out, you really don't need to use Javascript to achieve this. All you need to do is use the CSS :hover pseudo-class, like this:
.some_element {
color: #eee;
}
.some_element:hover {
color: #fff;
}
Much cleaner, much simpler. Works in pretty much every modern browser, including IE7+.
2 Comments
T.J. Crowder
As I've already pointed that out, I'm not seeing why post it a second time?
Phil Powell
Because there's no need for a Javascript solution—CSS can handle this perfectly adequately. Hence, the less verbose answer.