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