javascript - 如何将javascript函数仅应用于悬停的元素

Question

我使用 document.querySelectorAll 选择了两个具有相同类的元素，并且我想应用函数 onmousemove 但仅限于具有 mousemove 的元素。问题是我不知道如何使其在两个元素上工作，但仅当该元素悬停时(onmousemove 在其上)。我试过这个

let menuSingle = document.querySelectorAll('.navigation__single');
let menuSingleText = document.querySelector('.navigation__single-text');

menuSingle.onmousemove = function (e) {
    callParallax(e);
};

menuSingle.onmouseleave = function (e) {
    TweenMax.to(menuSingleText, 2, {
        y: 0,
        ease: Power3.easeOut
    });
};

它不起作用。但是，当我尝试使用 querySelector 进行选择时，它只选择第一个元素，并且它的工作原理如下。但我需要它来处理这两个元素。提前致谢

编辑:

我的整个代码

function menuHoverAnimation() {

        let menuSingle = document.querySelector('.navigation__single');
        let menuSingleText = document.querySelector('.navigation__single-text');

        menuSingle.onmousemove = function (e) {
            callParallax(e);
        };

        menuSingle.onmouseleave = function (e) {

            TweenMax.to(menuSingleText, 2, {
                y: 0,
                ease: Power3.easeOut
            });

        };

        function callParallax(e) {
            parallaxIt(e, menuSingleText, 500);
        }

        function parallaxIt(e, target, movement) {

            let $this = menuSingle;
            let relY = e.pageY - $this.offsetTop;

            TweenMax.to(target, 4, {
                y: (relY - $this.offsetHeight / 2) / $this.offsetHeight * movement,
                ease: Power3.easeOut
            });

        }

    }

演示仅针对第一个 child 的工作示例

https://codepen.io/riogrande/pen/MGOrRr

Answer 1

document.querySelectorAll() 返回包含匹配项的 HTMLElementCollection。您可以循环遍历此并将每个元素的属性设置为所需的函数:

let menuSingle = document.querySelectorAll('.navigation__single');
let menuSingleText = document.querySelector('.navigation__single-text');

menuSingle.forEach(elem => elem.onmouseenter = function (e) {
    callParallax(e);
});

menuSingle.forEach(elem => elem.onmouseleave = function (e) {

    TweenMax.to(menuSingleText, 2, {
        y: 0,
        ease: Power3.easeOut
    });

});

<小时/>

现在，您编辑了帖子，此类错误还有很多:

function menuHoverAnimation() {

        let menuSingle = document.querySelectorAll('.navigation__single');
        let menuSingleText = document.querySelectorAll('.navigation__single-text');

        menuSingle.forEach(elem => elem.onmousemove = function (e) {
            callParallax(e);
        });

        menuSingle.forEach(elem => elem.onmouseleave = function (e) {

            TweenMax.to(menuSingleText, 2, {
                y: 0,
                ease: Power3.easeOut
            });

        });

        function callParallax(e) {
            parallaxIt(e, menuSingleText, 500);
        }

        function parallaxIt(e, target, movement) {

            let $this = menuSingle;
            let relY = e.pageY - e.target.offsetTop;

            TweenMax.to(e.target, 4, {
                y: (relY - e.target.offsetHeight / 2) / e.target.offsetHeight * movement, //assuming they all have the same offsetHeight
                ease: Power3.easeOut
            });

        }

    }

menuHoverAnimation();

body {
  display: flex;
}

.navigation__single {
  width: 50%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
}
#red {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="navigation__single work-screen__trigger" id="red">
  <span class="navigation__single-text">Work</span>
</div>

<div class="navigation__single about-screen__trigger">
  <span class="navigation__single-text">About</span>
</div>