html - 按钮闪烁
问题描述
每当我将鼠标悬停在箭头的左/右/顶部附近时,都会非常快地闪烁。当我将鼠标准确地悬停在它的中心时,它会正常运行。可能是什么问题呢?此外,当我刷新页面时,当我们查看屏幕顶部时,箭头不应该是可见的,但它是可见的。我是否需要添加一些其他行以使其在刷新后不出现? https://jsfiddle.net/gvsz38h6/7/
<style>
.myBtn:hover {
cursor:pointer;
animation: animate 1.5s infinite;
}
@keyframes animate {
0% {
opacity: 0;
transform: rotate(-135deg) translate(-20px, -20px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(-135deg) translate(20px, 20px);
}
</style>
<body>
<script>
var mybutton = document.getElementById('myBtn');
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = 'block';
} else {
mybutton.style.display = 'none';
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<div id="myBtn" class="myBtn" onclick="topFunction()" style="mybutton" title="Top of the webpage"></div>
<div class="space50";
</body>
解决方案
发生这种情况是因为您正在移动触发动画的实际元素。实际上,在悬停时元素移动,但停止移动,因为它不再悬停,而是获得悬停并开始移动......考虑重新编写代码,使可见和动画部分成为伪::after
元素。此外,您正在移动实际的“可点击”元素,因此当有人将鼠标悬停在它上面时,他们无法点击它。
推荐阅读
- gridview - 从数据源填充 Telerik gridview 下的 asp 下拉列表
- r - 为每次迭代调用新数据框:循环遍历数据框?
- python - Keras LSTM - 使用来自生成器的 Tensorflow 数据集 API 提供序列数据
- r - 仅获取距参考距离以下的行
- java - 使用 JPA 生成实体 - 使用 java 8 time library/equals & toString 方法?
- docker - 如何重命名和删除 Dockerfile 中的文件
- javascript - JavaScript 中的模块是什么意思?
- php - 如何在学说 ORM Symfony 4.1 中使用 array_agg?
- angular - Angular 6:未绑定自定义管道命名空间
- quartz-scheduler - Quartz Scheduler:是否可以构建一个指定持续时间 *before* 时间点的重复触发器?