CODEWITHSUNDEEP
javascriptjquerycss
HelloWorldNoMore
HelloWorldNoMore

Reputation: 317

Change css styles using jQuery Hover

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/

Upvotes: 1

Views: 880

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

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

Upvotes: 5

James Craig
James Craig

Reputation: 6864

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

Upvotes: 0

Ryan
Ryan

Reputation: 14659

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

Upvotes: 0

Related Questions