CODEWITHSUNDEEP
htmlcss
George Flint
George Flint

Reputation: 1826

border-bottom CSS rule won't transition on mouseoff but will on hover

When I try to apply a transition for when you mouseon and mouseoff a nav item the item only uses the transition for mouseon, not mouseoff.

https://jsfiddle.net/grflint2/hp4qfma5/ has the code for this. I am using transition: border-color 0.1s, padding 0.1s; on the :hover selector and the normal one, but it's still not working.

I want it to transition off the same way it does when you hover over it. Why isn't it doing this?

Upvotes: 0

Views: 33

Answers (2)

boom
boom

Reputation: 194

changed your border in the initial state from

border-bottom: 0px solid rgba(255,255,255,0);

to

border-bottom: 4px solid transparent;

Fiddle Demo

Upvotes: 1

skaz
skaz

Reputation: 301

You have incorrectly set the transition. You used the word 'padding' instead of 'padding-bottom'. Regardless, you can remove the names all together and put in 'all' instead, since they are timed the same. So for example, you can change the lines where you have the following code

      transition: border-color 0.1s, padding 0.1s;

to this following code instead...(I slowed it down just so the change can be seen)

     transition: all .5s;

Upvotes: 2

Related Questions