CODEWITHSUNDEEP
csshovertransition
MEH
MEH

Reputation: 1

Transition between :hover and leaving :hover?

So I'm trying to get my pagination to slide smoothly over on hover and then slide back to its original position once the mouse is taken off the element. I've gotten it to slide at hover, but when the mouse is off the button, it simply snaps back instead of transitioning. Can someone help me fix this?

Here is my code.

#pagination {
   width: auto;
   margin-top: 4px;
   font-size: 40px;
   height: auto;
   border-left: 5px solid #2F4F4F;
   border-right: 1px solid #2F4F4F;
   text-shadow: 
   -1px 1px #000000;
   -2px 2px #000000;
   -3px 3px #000000;
   background: #ffffff;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;    
}

#pagination :hover {
    background: #2F4F4F;
    border-left: 15px solid #2F4F4F;
    border-right: 1px solid #7A8B8B;
    width: auto;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;    
}

Upvotes: 0

Views: 263

Answers (1)

Jonas Rothmann Hjalager
Jonas Rothmann Hjalager

Reputation: 49

The :hover needs to be specified after the element, without space.

#pagination :hover

To

#pagination:hover

Upvotes: 2

Related Questions