CSS伪类，用于悬停 [英] CSS pseudo class for leaving hover

问题描述

我在我的网站上有一个很好的悬停效果，当用户将鼠标悬停在链接上时，它会快速过渡.但是，当用户将鼠标悬停在框上时，阴影(和其他特征)会立即消失，而不会逐渐消失.有没有一种方法可以让我的属性同时淡入和淡出，也许使用某种:un-hover类型的伪类?谢谢！这是CSS块(如果有帮助的话):

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;
}

推荐答案

将转换放置在 a.squares 上，而不是 a.squares:hover

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 :)

这篇关于CSS伪类，用于悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！