6

I have a nice little hover effect on my website that quickly transitions in as the user hovers over a link. But when the user leaves hovering over the box, the shadow (and other traits) go away immediately, instead of fading back out. Is there a way I can get the properties to fade both in AND out, maybe using some sort of :un-hover type pseudo class? Thanks! 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;
}
Daniel Imms
  • 47,944
  • 19
  • 150
  • 166
grantmcconnaughey
  • 10,130
  • 10
  • 37
  • 66
  • There is no `:un-hover` because it doesn't make sense as a pseudo-class. See http://stackoverflow.com/questions/11703241/does-css-have-a-blur-selector-pseudo-class/11703334#11703334 – BoltClock Mar 04 '13 at 03:59

1 Answers1

6

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 went through this exact thing when I was just leaving about transitions :)

Daniel Imms
  • 47,944
  • 19
  • 150
  • 166
  • Awesome! Thank you! But, how can I prevent animation on page load? – Alexey Sidash Nov 22 '15 at 19:31
  • 1
    @AlexeySidash The transition occurs when the property changes, to prevent the transition on page load either disable the transition initially (`.page-loaded a.squares`) or prevent the property from changing. – Daniel Imms Nov 22 '15 at 23:23