javascript Наведите один элемент и произведите эффект другого - PullRequest
Новая
       17

javascript Наведите один элемент и произведите эффект другого

0 голосов
/ 13 июня 2019

У меня есть ряд элементов (.dot), и я хочу иметь возможность навести курсор на другой элемент (.dotWrapper) и повлиять на масштаб только точки, содержащейся в этом конкретном dotWrapper.

У меня есть настройка кодового ручки, которая масштабирует точку, когда я наведу курсор на точку, но мне нужна большая область наведения, поэтому я хочу иметь возможность навести курсор на dotWrapper и влиять на масштаб только этой конкретной точки в этом определенный dotWrapper

Код Pen Demo 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%"});
});

1 Ответ

1 голос
/ 13 июня 2019

Вы можете получить конкретную точку, используя $ (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%"});
});
...