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') }
)

Look the `.hover()` method in jquery. http://api.jquery.com/hover/ — Felipe Oriani, Dec 04 '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 04 '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 04 '12 at 16:18
@Alnitak Good point, i chose `display` attribute randomly, probably not a good example :) — Nyxynyx, Dec 04 '12 at 16:18
Just to clarify. If I understood original question is not how to **trigger** jQuery event on hover/hout, but rather how to decorate the hover style of an element with particular CSS attributes, etc. However that is not possible, please see here more details: (jQuery Bug tracker: ACCESS :HOVER CSS PROPERTIES OF AN ELEMENT VIA JQUERY: http://bugs.jquery.com/ticket/4434). Therefore workarounds in other answers provided should be used instead. — mPrinC, Feb 21 '15 at 16:51

score 35 · Accepted Answer · answered Dec 04 '12 at 16:16

35

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

answered Dec 04 '12 at 16:16

Jon

3,154
13
53
96

7

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 04 '12 at 16:20
6

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. http://jsperf.com/hover-vs-mouseenter – Jon Dec 04 '12 at 16:40
@Jon great answer, very useful thanks. One quick thing, you forgot the "#" hash symbol on the hex color code for the `mouseleave` function, which is required for that bit of code to work. – Mickey Vershbow Jan 26 '22 at 18:46

Mark Walters · Answer 2 · 2012-12-04T16:20:36.437

19

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

edited Dec 04 '12 at 16:20

answered Dec 04 '12 at 16:16

Mark Walters

12,060
6
33
48

score 3 · Answer 3 · answered Dec 04 '12 at 16:17

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.

score 2 · Answer 4 · answered Dec 04 '12 at 16:18

2

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

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

answered Dec 04 '12 at 16:18

Laz Karimov

714
10
26

This causes the css to stick after you move the mouse away. – Moss Mar 18 '14 at 04:32

Adding hover CSS attributes via jQuery/Javascript

4 Answers4

Linked

Related