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).addClass('someStyle') because I am injecting the DOM elements into another page.

We can apply the usual css styles using

$('#some-content').css({     marginTop: '60px',     display: 'inline-block' }); 

How should we add the CSS styles for :hover events?

---

Do we have to resort to:

$('#some-content').hover(        function(){ $(this).css('display', 'block') },        function(){ $(this).css('display', 'none') } ) 

Answer 1

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"); }); 

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()