Change css styles using jQuery Hover

Question

I want to change the background color of a button on hovering in and out of it. Please help me to make my jquery code work.

function onHoverIn(button) {
    $(button).css('background-color', 'rgba(193, 86, 10, 0.86)')
};
function onHoverOut(button) {
    $(button).css('background-color', 'rgba(26, 13, 3, 0.26)')
};
$("button").hover(onHoverIn(this), onHoverOut(this));

Reference - https://api.jquery.com/hover/

Roko C. Buljan · Accepted Answer · 2015-11-19 23:30:35Z

5

The callback hover() functions are already good friends with the this (jQuery Element Object reference), so all you need is to revoke the $(this)

function onHoverIn() {
   $(this).css('background-color', 'rgba(193, 86, 10, 0.86)');
}
function onHoverOut() {
   $(this).css('background-color', 'rgba(26, 13, 3, 0.26)');
}
$("button").hover(onHoverIn, onHoverOut);

You cannot pass arguments to arguments. That's what was wrong in your code:

.method( myFunz( this ) )
//       ^argument  ^argument :(

How's that $(this) is available in those Named Function Declarations?

jQuery .hover() Docs

.hover( handlerIn, handlerOut )

handlerIn
Type: Function( Event eventObject )
A function to execute when the mouse pointer enters the element.

handlerOut
Type: Function( Event eventObject )
A function to execute when the mouse pointer leaves the element.

so .hover() method accepts two function callbacks.

and exploring the jQuery code for the .hover() method:

hover: function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
},

you can clearly see that it returns this (the Event eventObject) to maintain methods chainability (.hover().click().etc()) and to make for you accessible the this (Event eventObject) who triggered the event.

If (really, if) all you need is a :hover that changes a background-color

use CSS :)

button {
    background-color : rgba(193, 86, 10, 0.86);
}
button:hover {
    background-color : rgba(26, 13, 3, 0.26);
}

edited Nov 19, 2015 at 23:30

answered Nov 19, 2015 at 22:36

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

HelloWorldNoMore Over a year ago

Thanks. Can you please tell me what is wrong with my code ?

David Thomas Over a year ago

Have a demo, if you'd like: jsfiddle.net/davidThomas/sbxnf6p6 (I was a few seconds behind you because I wanted to verify first...darn!) ;)

HelloWorldNoMore Over a year ago

Thanks again. How is onHoverXxx method given a reference to the button ?

Roko C. Buljan Over a year ago

@HelloWorldNoMore a function is a function, so it's given the exact way as you'd do using .hover(function(){ $(this).blabla(); }); where this is always this (the element who triggered the event).

Roko C. Buljan Over a year ago

@HelloWorldNoMore to explain a bit more, jQuery Methods like .hover(), .css(), .click() etc... name it (almost all methods, related to HTMLElements) internally, (to maintain Methods chainability) by default return this;, so that the this reference can be passed trough methods and accessed inside the function itself (without the need to specify some i.e: that argument in the fn arguments list.).

|

Ryan · Accepted Answer · 2015-11-19 22:38:53Z

0

Here is another way. When jQuery fires the callback, it will be called on the button object. so this will be the button.

function onHoverIn(button) {
    $(button).css('background-color', 'rgba(193, 86, 10, 0.86)')
};

function onHoverOut(button) {
    $(button).css('background-color', 'rgba(26, 13, 3, 0.26)')
};


$("button").hover(function() {
    onHoverIn(this)
},function() {
    onHoverOut(this)
});

answered Nov 19, 2015 at 22:38

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

1 Comment

HelloWorldNoMore Over a year ago

Thanks for your answer.

James Craig · Accepted Answer · 2015-11-19 22:42:12Z

0

Another option is to bind the mouseover and mouseout events to be more explicit with your event bindings. JSFiddle example.

function onHoverIn() {
   $(this).css('background-color', 'rgba(193, 86, 10, 0.86)');
}

function onHoverOut() {
   $(this).css('background-color', 'rgba(26, 13, 3, 0.26)');
}

$(document).on('mouseover', 'button', onHoverIn);
$(document).on('mouseout', 'button', onHoverOut);

answered Nov 19, 2015 at 22:42

James Craig

6,90210 gold badges50 silver badges78 bronze badges

1 Comment

HelloWorldNoMore Over a year ago

Thanks for your answer.

Collectives™ on Stack Overflow

Change css styles using jQuery Hover

3 Answers 3

use CSS :)

8 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

use CSS :)

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related