CSS pseudo class for leaving hover(用于离开悬停的 CSS 伪类)
问题描述
我的网站上有一个不错的小悬停效果,当用户悬停在链接上时,它会快速过渡.但是当用户将鼠标悬停在盒子上时,阴影(和其他特征)会立即消失,而不是淡出.有没有办法让属性同时淡入和淡出,也许使用某种 :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 伪类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:用于离开悬停的 CSS 伪类


- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01