Question

每当我将鼠标悬停在箭头的左侧/右侧/顶部附近时，它的闪烁速度都非常快。当我正好悬停在它的中心时，它会正常运行。可能是什么问题呢？此外，当我刷新页面时，当我们查看屏幕顶部时，箭头不应该可见，但它是可见的。我是否需要添加一些其他行以使其在刷新后不出现？ 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>

Answer 1

发生这种情况是因为您正在移动触发动画的实际元素。实际上，在悬停时元素移动，但停止移动，因为它不再悬停，而是获得悬停并开始移动......考虑重新编写代码，使可见和动画部分成为伪 ::after 元素。此外，您正在移动实际的“可点击”元素，因此当有人将鼠标悬停在它上面时，他们无法点击它。

Answer 2

当你将鼠标悬停在它上面时，它会移动。

当您越过它的边缘时，它会从鼠标指针下方移出，因此不再悬停。所以它移回鼠标指针下。所以它再次悬停并再次移开。等

不要移动悬停目标本身。在要移动的元素周围用静态位置包裹一些东西，并使静态元素成为悬停目标。

按钮闪烁

2 个答案: