javascript Hover one element and effect another

Question

I have a series of elements (.dot) and I want to be able to hover over the other element (.dotWrapper) and effect the scale of only the dot that is contained within that specific dotWrapper.

I have a codepen setup that scales the dot, when I hover over the dot, but I want a larger hover area, so I want to be able to hover over the dotWrapper and effect the scale of only that specific dot within that specific dotWrapper

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

Answer 1

You can get the specific dot by using $(this).children('...') Try putting this in your code:

$('.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%"});
});