CSS pseudo-class for leaving

Question

I have a nice little freeze effect on my website, which quickly jumps when the user clicked on the link. But when the user leaves hovering over the box, the shadow (and other features) immediately disappear, not disappear. Is there a way that properties can disappear in AND, perhaps using some type of pseudo-class like un-hover? Thank you And here is the CSS block if it helps:

a.squares:hover, a.squares:active { color: black; background-color: #E8E8E8; box-shadow: 0 0 12px black; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; } 

Answer 1

Put the transitions on a.squares not a.squares:hover

 a.squares { -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; } a.squares:hover, a.squares:active { color: black; background-color: #E8E8E8; box-shadow: 0 0 12px black; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } 

I looked at this exact thing when I just left the transitions :)