用于离开悬停的 CSS 伪类

Posted

技术标签:

【中文标题】用于离开悬停的 CSS 伪类【英文标题】:CSS pseudo class for leaving hover 【发布时间】: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,因为它作为伪类没有意义。见***.com/questions/11703241/… 【参考方案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) 或阻止属性更改。

以上是关于用于离开悬停的 CSS 伪类的主要内容,如果未能解决你的问题,请参考以下文章

第一章入门篇伪类伪对象

css3 伪类

css中伪类/伪元素详解

伪类(伪类选择器)

css 中的伪类 first-child 和nth-child的区别

CSS :hover伪类选择器