Robin Cox
Robin Cox

Reputation: 1490

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

Upvotes: 0

Views: 3018

Answers (1)

Balaji Sabdhar M
Balaji Sabdhar M

Reputation: 428

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/

Upvotes: 2

Related Questions