css transition on border left works on hover but not on mouseout

I have this css to transform a border-left, on hover a sliding effect to the right happens. When the mouse outs the a tag the border-left should transform back to 0px and a sliding effect back to the left should occur, but it isnt happening. What's wrong?

a {
  border-left: 0px solid #32acaf;
  transition: border-left 0.7s;
}

a:hover {
  background-color: #473828;
  color: rgba(255, 255, 255, 1) !important;
  border-left: 7px solid #32acaf;
  transition: border-left 0.2s;
}

Answers


I have used the css code you have given and checked the output in most of the browser I have added the html and css code and also the jsfiddle like.

HTML

<a>hai</a>

css

a {
  border-left: 0px solid #32acaf;
  transition: border-left 0.7s;
}

a:hover {
  background-color: #473828;
  color: rgba(255, 255, 255, 1) !important;
  border-left: 7px solid #32acaf;
  transition: border-left 0.2s;
}

The jsfiddle link is

http://jsfiddle.net/4ZeCz/1929/


Need Your Help

Java remove listener from button after 3 clicks

java swing button action listener

So I want to remove a listener from a button after the button has been pressed 3 times.