Question

我选择了两个具有document.querySelectorAll相同类的元素，我想将函数onmousemove应用于具有mousemove的元素。问题是，我不知道如何使它在两个元素上都有效，但只有当该元素悬停时（onmousemove over it）。我试过这个

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
            });

        }

    }

仅在第一个孩子上使用工作示例的演示

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

Answer 1

您需要将mousemove和mouseleave事件侦听器添加到具有类navigation__single的每个元素。如下所示：

function mousemoveFn(e){
  callParallax(e);
}

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

let menuSingle = document.querySelectorAll('.navigation__single');
for(var i=0; i<menuSingle.length; i++){
  menuSingle[i].addEventListener('mousemove', mousemoveFn);
  menuSingle[i].addEventListener('mouseleave', mouseleaveFn);
}

Answer 2

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

＆＃13;

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
    });

});

＆＃13;

现在，你编辑了你的帖子，还有很多这样的错误：

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

你快到了。只需要循环遍历所有节点以将事件附加到它们，如

let menuSingle = document.querySelectorAll('.navigation__single');
let menuSingleText = document.querySelector('.navigation__single-text');


for(var i=0; i<menuSingle.length; i++){
menuSingle[i].addEventListener("onmousemove", callParallax)
}

Answer 4

您可以使用Jquery，只需输入ID名称

$( "#mydiv" ).hover(
  function() {
    console.log('Hovering');
  }, function() {
    console.log('Not Hovering');
  }
);

#mydiv {
  background-color: red;
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>
  
</div>

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

4 个答案: