My assignment requires that I use jquery only. Doesn't seem practical but I'm limited. I was able to figure out how to do a hover state but when the styles get applied, it stays. So check this out..

$(".cta-button").css({
      background: "#476887",
      "text-align": "center",
      width: "173px",
      height: "40px",
      margin: "62px auto 33px",
      cursor: "pointer"
    });
    $(".cta-button").hover(function() {
      $(this).css("background-color", "#509de5");
    });

Of course when I'm no longer hovering, I want it to revert back to it's original background color. How do I go about doing this? Thanks!!

My assignment requires that I use jquery only. Doesn't seem practical but I'm limited. I was able to figure out how to do a hover state but when the styles get applied, it stays. So check this out..

$(".cta-button").css({
      background: "#476887",
      "text-align": "center",
      width: "173px",
      height: "40px",
      margin: "62px auto 33px",
      cursor: "pointer"
    });
    $(".cta-button").hover(function() {
      $(this).css("background-color", "#509de5");
    });

Of course when I'm no longer hovering, I want it to revert back to it's original background color. How do I go about doing this? Thanks!!

• javascript
• jquery
• css

• 2 api.jquery./hover – Scott Simpson Commented Sep 2, 2017 at 1:03
• 2 Did you read the documentation at all? hover() accepts two functions, one for the mouse entering, and one for the mouse leaving. – adeneo Commented Sep 2, 2017 at 1:17
• Read documentation of libraries.... – epascarello Commented Sep 2, 2017 at 1:21
• Use $(this).addClass(...) rather than .css() in the hover() function, then you can easily removeClass() on either the second arg of hover or mouseout(). – fdomn-m Commented Sep 2, 2017 at 1:34
• Possible duplicate of: stackoverflow./questions/9480968/… – Aref Ben Lazrek Commented Sep 2, 2017 at 1:34

2 Answers 2

You can easily achieve that by using the hover method of jQuery

As stated in the docs, this method can accept one to two arguments, the first one is called the handlerIn which can be translated as the hover state, mouse enter, etc and the handlerOut which corressponds to the 'mouse leave'

So to achieve what you want you can try something like this

$('DOM_NODE').hover(mouseEnter, mouseLeave);
function mouseEnter() {
     // do something when the mouse enters the dom node 
};
function mouseLeave() {
     // do something when the mouse leaves the dom node
};

You can add mouseover event
a fiddle

$(".cta-button").css({
      background: "#476887",
      "text-align": "center",
      width: "173px",
      height: "40px",
      margin: "62px auto 33px",
      cursor: "pointer"
    });
    $(".cta-button").hover(function() {
      $(this).css("background-color", "#509de5");
    }).mouseover(function() {
      $(this).css("background-color", "#476887");
    });