Question

我的网站上有一个很好的小悬停效果，当用户将鼠标悬停在某个链接上时会快速转换。但是当用户将鼠标悬停在盒子上时，阴影（和其他特征）会立即消失，而不是逐渐消失。有没有办法我可以让属性淡入和淡出，也许使用某种：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;
}

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

当我刚刚离开过渡时，我经历了这个确切的事情：）

用于离开悬停的CSS伪类

1 个答案: