如何选择间距为

Question

使用JavaScript我创建了一个由一堆小方块组成的图形。在这些正方形之间总是有一些间距。

现在我想在鼠标光标悬停在图形上时对图形应用效果。

每个方块代表一个数组中的元素，并使用模数定位。

rects = s.rect(positionX, positionY, 2, 2);

function drawEle1(index, element) {
   var x = (index % 4)*4;
   var y = 1080 - Math.floor(index/4)*4;
   TweenMax.to($(element), 1, {attr: {x: x, y: y, width: 2, height: 2, fill: "red"}});
}

$(".Ele1").each(drawEle1);

这些方块都有相同的类，所以我尝试使用hover()，但因为它们非常小（2px），所以它不会按预期的方式工作。

function lowOpacity(index, element) {
    TweenMax.to($(element), 0.5, {opacity: 0.5});
}

function highOpacity(index, element) {
    TweenMax.to($(element), 1, {opacity: 0.5});
}

//Functions for hover()
function opacityDown () {
    $(".Ele1").each(lowerOpacity)
}

function opacityUp () {
    $(".Ele1").each(raiseOpacity)
}

$(".Ele1").hover(opacityDown, opacityUp);

当鼠标光标进入图形或蓝色边界时，该图形内的所有方块都应改变不透明度。

所以基本上我认为我需要一个围绕图形的边界框并检查光标是否超出边界。要检索图形的位置，我可以使用position（）。

我的想法是否正确或是否有更快捷，更简单的方法？我如何使用位置？