用于离开悬停的 CSS 伪类答案

【问题标题】：CSS pseudo class for leaving hover用于离开悬停的 CSS 伪类
【发布时间】：2013-02-18 02:41:42
【问题描述】：

我的网站上有一个不错的小悬停效果，当用户将鼠标悬停在链接上时，它会快速过渡。但是当用户将鼠标悬停在盒子上时，阴影（和其他特征）会立即消失，而不是淡出。有没有办法让属性同时淡入和淡出，也许使用某种 :un-hover 类型的伪类？谢谢！如果有帮助，这里是 CSS 块：

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

【问题讨论】：

没有:un-hover，因为它作为伪类没有意义。见stackoverflow.com/questions/11703241/…

标签： css hover css-selectors css-transitions pseudo-class

【解决方案1】：

将过渡放在a.squares 而不是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;
}

当我刚刚离开过渡时，我经历了这件事:)

【讨论】：

太棒了！谢谢！但是，如何防止页面加载时出现动画？
@AlexeySidash 属性更改时发生过渡，以防止页面加载时的过渡最初禁用过渡 (.page-loaded a.squares) 或阻止属性更改。