My code works when hovering in but not when hovering out-CodePudding

Alright, so when I use this code and hover over the object, the transition works. But if I take my mouse OFF of the object, the transition doesn't happen. I've seen other posts talk about this but the solutions don't work.

Here's my code in CSS:

.square{
margin-top: 20px;
  height: 100px;
  width: 400px;
  border-radius: 20px;
  background:#3d3434;
  outline: none;
  transition: 0.25s;
}

.square:hover{
    outline: 3px solid #21ff46;
}

Also, I'm relatively new to coding and CSS.

CodePudding user response：

You code works properly. The reason why you see no animation on mouseleave is that after hover pseudostate ends, there's no outline at all, and browser doesn't know to what position he has to shrink the outline. Also it doesn't understand what color it should preserve while shrinking, without hover state there's no color defined.

So, the solution is to add this line to your .square

outline: 0 solid #21ff46;

Leave the rest as it is, your problem is solved.