SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

jQuery hover

3 years 9 months ago - 3 years 9 months ago #118799 by Juc2
jQuery hover was created by Juc2
Hi all,

Here the background changes to pink on hover and then stays pink. Can I say: change to pink on hover and then return to original state (yellow background) when hover is removed? Or does that need mouseenter / mouseout ?

Thanks....

Please Log in to join the conversation.

3 years 9 months ago #118802 by Valentin
Replied by Valentin on topic jQuery hover
Hi Juc2,

Try this change:
$('#revenue').hover(
    function () {
        $(this).css("background-color", "pink");
    },
    function () {
        $(this).css("background-color", "yellow");
    }
);

I added a coma with a second function that will apply the yellow background when the hover event ends:
,
function () {
    $(this).css("background-color", "yellow");
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 9 months ago #118803 by Juc2
Replied by Juc2 on topic jQuery hover
@ Valentin yes that works thank you but where in your code does it say "when the hover event ends", I mean how / why does the second function apply "when the hover event ends"?

Thanks...

Please Log in to join the conversation.

3 years 9 months ago #118804 by Nick
Replied by Nick on topic jQuery hover
That's part of the jQuery API:
api.jquery.com/hover/

.hover takes two arguments. The first specifies what to do on hover. The second specifies what to do when hover ends.

Hope this helps! Let us know if you have any questions and we'll be glad to answer.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 9 months ago #118807 by Juc2
Replied by Juc2 on topic jQuery hover
@ Nick ok got it thanks!

In this version the opacity css is applied instantly - can the css be applied gradually eg over 10 seconds ie so it fades gradually?

Thanks...

Please Log in to join the conversation.

3 years 9 months ago #118808 by Valentin
Replied by Valentin on topic jQuery hover
Please check this example: jsfiddle.net/Semqg/
Hover the red square to see it in action

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 9 months ago #118810 by Juc2
Replied by Juc2 on topic jQuery hover

Valentin wrote: Please check this example: jsfiddle.net/Semqg/
Hover the red square to see it in action

Kind regards,
Valentín


@ Valentín ok thanks...

Please Log in to join the conversation.

3 years 9 months ago #118811 by Nick
Replied by Nick on topic jQuery hover
Let know of you need anything else, Juc2!

Cheers,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!