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