如何解决将鼠标悬停在CSS动画上
对于我的项目,我编写了一个纯CSS悬停菜单。页面加载完成后,菜单(#drop
)会等待几秒钟,然后才会向上移动,离开视线。您可以将鼠标悬停在页面顶部的其他元素(#hover
)上来返回菜单。
它对我来说很完美,但是有一个问题。加载页面时,您仍然悬停在#hover
上方,#drop
在等待结束后会向上移动一会儿,然后以小故障的方式往下移。
您可以在这里亲自体验:https://jsfiddle.net/27mbnpwk/
只需运行脚本并将光标放在文本上,等待几秒钟即可看到它跳转。
是否有一种方法可以使菜单仅在您不使用纯CSS悬停在#drop
上时才显示?或者,否则,使用js?
解决方法
我找不到纯CSS的方法,但是jquery有一个简单的解决方案(感谢@LinkinTED):
两个CSS类,一个用于菜单向下,一个用于菜单向上:
.down{
transform: translate(0,00%);
}
.up{
transform: translate(0,-175%);
}
然后在javascript中创建一个在页面加载后启动的函数。该函数等待3秒钟,然后将up
类添加到元素中,将其向上推,使其不可见。并且有一个函数会在每次将#hover
悬停在该类上时更改类:
window.onload = function() {
setTimeout(
function(){
$('#drop').removeClass('down').addClass('up');},3000);
};
$('#hover').hover(
function() {
// mouse in
$('#drop').removeClass('up').addClass('down');
},function() {
// mouse out
$('#drop').removeClass('down').addClass('up');
}
);
在此处进行测试: https://jsfiddle.net/g9oq0124/1/
如果有人发现纯CSS或更简洁的方式,我很想听听!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。