gpt4 book ai didi

css - 使用关键帧在 mouseout 上淡出?

转载 作者:太空宇宙 更新时间:2023-11-03 23:04:54 25 4
gpt4 key购买 nike

我正在使用关键帧动画和标记,当您将鼠标悬停在它们上方时,会出现信息或图片。我添加了一个淡入,但我不知道如何让它淡出。
我有关键帧部分:

@keyframes fadeout {
0% {
opacity: 1;}
100% {opacity: 0;}
}
.fadeout {
-webkit-animation-name: fadeout;
animation-name: fadeout;
}

这是我要插入的动画部分(?):

animation-duration: 0.5s;
animation-name: fadeout;

我想我的问题是我不知道如何插入它。

这是我正在使用的代码笔:

http://codepen.io/aslenwhitmore/pen/rxLYgQ?editors=0100

谁能告诉我应该在哪里插入淡出?谢谢!

最佳答案

您可以使用 transition 属性来实现您想要的效果,该属性在悬停时触发不透明状态。不需要 javascript,因为 CSS 允许您在悬停或其他状态下操作选择器的子项。

See my codepen fork for a working example

由于 CSS 无法转换 display 属性,我们将只使用不透明度和 z-index

z-index 会隐藏文档下的元素(z-index:-1),激活后将元素调到999

悬停代码

&:hover .map-marker-info {
opacity:1;
z-index:999;
}

静态代码

&-marker-info {
display: block;
transition:0.3s;
opacity: 0;
z-index: -1;
}

P.S 我建议增加悬停区域的半径,使点更加用户友好

关于css - 使用关键帧在 mouseout 上淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35074886/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com