Adding hover CSS attributes via jQuery/Javascript

Question

Some CSS styles need to be applied to an element on hover, and CSS styles have to be applied using javascript/jquery directly and not through stylesheets or $(this).ad

Answer 1

You should put them in a hover event:

var elem = $('#elem');

elem.hover(function () {
    // ... :hover, set styles
}, function () {
    // ... this function is called when the mouse leaves the item, set back the
    //     normal styles
});

However, I completely recommend to put your CSS in classes and use those classes in JS, you should split the languages as much as you can.

Answer 2

Try this:

$('#some-content').hover(function(){
    $(this).css({ marginTop: '60px', display: 'inline-block' });
}, function(){
    $(this).css({ //other stuff });
});

or using classes

$('#some-content').hover(function(){
    $(this).toggleClass('newClass');
});

More info here .hover() and .toggleClass()

Answer 3

$("#someObj").hover(function(){
    $(this).css(...);
}:);

http://api.jquery.com/hover/

Answer 4

I find using mouseenter and mouseleave to be better than hover. There's more control.

$("#somecontent").mouseenter(function() {
    $(this).css("background", "#F00").css("border-radius", "3px");
}).mouseleave(function() {
     $(this).css("background", "00F").css("border-radius", "0px");
});