javascript 悬停一个元素并影响另一个元素

Question

我有一系列元素 (.dot)，我希望能够将鼠标悬停在另一个元素 (.dotWrapper) 上并仅影响包含在该特定 dotWrapper 中的点的比例。

当我将鼠标悬停在点上时，我有一个缩放点的 codepen 设置，但我想要更大的悬停区域，所以我希望能够将鼠标悬停在 dotWrapper 上并仅影响特定点的缩放在那个特定的 dotWrapper

代码笔演示 https://codepen.io/celli/pen/MMwpjx

var dot = document.getElementsByClassName("dot"),
    dotWrapper = document.getElementsByClassName("dotWrapper");


$('.dot').mouseover(function(event) {
 TweenMax.to(this, .5,{scale:3, ease: Circ.easeOut, transformOrigin:"50% 50%"});
});

$('.dot').mouseout(function(event) {
 TweenMax.to(this, .5,{scale:1, ease: Circ.easeIn, transformOrigin:"50% 50%"});
});

Answer 1

你可以使用 $(this).children('...') 获取特定的点尝试将其放入您的代码中：

$('.dotWrapper').mouseover(function(event) {
 TweenMax.to($(this).children('.dot'), .5,{scale:3, ease: Circ.easeOut, transformOrigin:"50% 50%"});
});

$('.dotWrapper').mouseout(function(event) {
 TweenMax.to($(this).children('.dot'), .5,{scale:1, ease: Circ.easeIn, transformOrigin:"50% 50%"});
});

javascript 悬停一个元素并影响另一个元素

javascript Hover one element and effect another

javascript

gsap