Javascript 如何选择间距在中间的图元

我使用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（）

---

我的想法是正确的还是有一种更快更简单的方法？如何使用position来实现这一点？

当它覆盖一个正方形或整个对象时，是否要更改不透明度，我的意思是，即使鼠标位于空格上，对象是否也要更改不透明度？可以使用CSS，如

。graph:hover.square{opacity:1}

。你能发布你的代码吗？@JSmith是ofc。当它覆盖一个正方形或整个对象时，你想改变不透明度吗？我的意思是，即使你的鼠标在空格上，你也应该改变对象的不透明度吗？你可以使用CSS，比如

。graph:hover.square{opacity:1}

。你能发布代码吗？@JSmith是ofc。