Jquery: using hover to change css attributes

Question

I am trying to make a button for my website, which has a changing color hover effect. It can simply be done in css in this way:

.button{
    color: green;
}

.button:hover {
    background : green;
    color: black;
}

However, I wanted to give this a nice transition using JQuery (since I'm trying to learn it). Here's one of the codes I've tried so far:

$(function() {
    $('.button').on('mouseover', function() {
        $(this).css({
            "background" : "green", 
            "color" : "black",
        })
    })
})

I've tried it in so many other ways, like using the "hover" function instead of "on(mouseover)", using the addClass method, and so on. But in all of those, nothing happens when I hover the mouse on the button. Is there any easy way to do this?

Check your console for errors it's probably because you didn't close the function, check Sphinx's comment. — Spoody
– Spoody, Commented Mar 16, 2018 at 23:06
Thanks for the comment. It was a problem in the actual question text (I fixed it), but in my JS file everything is closed right. I get no errors in the console, but my code just doesn't do anything. — Lucas Bernardi
– Lucas Bernardi, Commented Mar 17, 2018 at 3:19

Scoots · Accepted Answer · 2018-03-16 22:57:50Z

2

You can have nice transitions in css! A simple implementation with transition is below. More complicated effects can be achieved using @keyframes

.button {
    display: inline-block;
    padding: 10px 40px;
    background-color: #0f82e0;
    color: #ffffff;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #27b258;
}

<div class="button">I&#39;m a button!</div>

answered Mar 16, 2018 at 22:57

Scoots

3,1142 gold badges25 silver badges35 bronze badges

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

2 Comments

Lucas Bernardi Over a year ago

Thank you for the tip! But how can I do it in Jquery?

Scoots Over a year ago

@LucasBernardi You've actually stumbled across one of the more annoying parts of .animate() which is that it doesn't nativley support colour transitions. You'd need the help of a plugin like jQuery UI (jqueryui.com/animate) to accomplish that. The alternative is you use .addClass and .removeClass (or .toggleClass) and continue using a CSS transition, just controlled through the addition and removal of a second class name.

Chris J. Zähller · Accepted Answer · 2018-03-17 03:46:12Z

You can use CSS transitions to smooth out the effect. There are jQuery libraries to handle this, but CSS is the better way. You'll need to check for feature support and use jQuery transitions only for browsers that need it.

EDIT: @Lucas Bernardi since you insist on doing this with jQuery instead of native CSS methods, you can use .animate() with the jQuery.Color plugin. But for browsers that support it, you are better off with CSS transitions.

From the .animate() documentation:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used).

Example usage from the jQuery.Color documentation:

jQuery("#go").click(function () {
  jQuery("#block").animate({
    backgroundColor: "#abcdef"
  }, 1500);
});
jQuery("#sat").click(function () {
  jQuery("#block").animate({
    backgroundColor: jQuery.Color({
      saturation: 0
    })
  }, 1500);
});

Collectives™ on Stack Overflow

Jquery: using hover to change css attributes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related