up vote 0 down vote favorite

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') }
)
share|improve this question
95% accept rate
Look the .hover() method in jquery. api.jquery.com/hover – Felipe Oriani Dec 4 '12 at 16:15
why not add and remove a class based on the hover event in jquery or onmouseover and onmouseout? – Jon Taylor Dec 4 '12 at 16:16
you want the element to disappear when you've hovered away from it? How are you supposed to hover back onto it again? – Alnitak Dec 4 '12 at 16:18
@Alnitak Good point, i chose display attribute randomly, probably not a good example :) – Nyxynyx Dec 4 '12 at 16:18
feedback

5 Answers

up vote 1 down vote accepted

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");
});
share|improve this answer
2  
Care to elaborate on the "There's more control" statement? As far as I'm aware the .hover() function is just a shorthand for doing precisely what you've coded. – Anthony Grist Dec 4 '12 at 16:20
I just like the explicitness of it saying 'mouse entering the element' and 'mouse leaving the element'. However, the graphs on this page would suggest that live mouseenter/mouseleave is the best in terms of optimization. jsperf.com/hover-vs-mouseenter – Jon Dec 4 '12 at 16:40
feedback
up vote 0 down vote

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

share|improve this answer
feedback
up vote 0 down vote

try hover() its like

 $(selector).hover(inFunction,outFunction)

try

$('#some-content').hover(function(){
       $('#some-content').css( marginTop: '60px', display: 'inline-block');
},function(){
       $('#some-content').css( other);
})
share|improve this answer
feedback
up vote 0 down vote

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.

share|improve this answer
feedback
up vote 2 down vote 
$("#someObj").hover(function(){
    $(this).css(...);
}:);

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

share|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.