CODEWITHSUNDEEP
javascriptjquerycss
Dres
Dres

Reputation: 1509

How to reverse hover state with jQuery?

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!!

Upvotes: 2

Views: 3948

Answers (2)

MaieonBrix
MaieonBrix

Reputation: 1624

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

Upvotes: 7

Aref Ben Lazrek
Aref Ben Lazrek

Reputation: 1064

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

Upvotes: 0

Related Questions