CODEWITHSUNDEEP
javascriptjquery
BPmkt
BPmkt

Reputation: 59

JQUERY - Change SRC back to original after not hover

I have a script that I am trying to use to change the src attr for an icon. The icon that I am loading is a different color and it is intended to notify the user of the link associated with the icon.

I have the src changing to the second icon on hover. However, when the user moves the mouse from the icon, it does not revert back to the original icon and stays in the second state.

I have written code to try to get it to return back, but this seems to cause the original code not to work. (so it doesn't do anything with the second block added).

Any help with this would be very much appreciated. Here is the code:

JS
$socialBlue1.hover(function () {
    $(this).attr("src", "../icons/socialBlue1.png");
});

$socialBlue1.not().hover(function () {
    $(this).attr("src", "../icons/socDark1.png");
});

Upvotes: 1

Views: 355

Answers (2)

Taylor Glaeser
Taylor Glaeser

Reputation: 1313

You can use the .hover() method for both "on hover" and "off hover". Just put the second function into .hover() method, after the first function. It acts as a callback once the .hover() event ends.

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

This is how it would look:

$socialBlue1.hover(function () {
    $(this).attr("src", "../icons/socialBlue1.png");
}, function () {
    $(this).attr("src", "../icons/socDark1.png");
});

Upvotes: 0

nicael
nicael

Reputation: 19024

You searched for mouseout:

$socialBlue1.mouseout(function () {
    $(this).attr("src", "../icons/socDark1.png");
});

Upvotes: 1

Related Questions