我使用 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 的工作示例
最佳答案
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>
关于javascript - 如何将javascript函数仅应用于悬停的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50216023/