Reputation: 1490
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
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