javascript - 让JS在同一页面上显示的十个相等的div中仅触发之一

这是我到目前为止所拥有的：一个充当“ oros”类的头像图像。在它之上，我还有另一个类，叫做“ josito”。 josito包含个人资料信息，并且将其隐藏起来，以便当您将鼠标悬停在头像上时，它将自动显示。

问题：同时，我希望成像的头像变得模糊。我用JS实现了它。因此，当我将鼠标悬停在josito上时，oros会变得模糊。我说“ kinda”是因为它的html标记会在同一页面中自动重复十次。因此，当我悬停一个头像时，其他九个头像就变得模糊了。我只想模糊我正在徘徊的那个。

到目前为止，这里是我拥有的JS：

jQuery(document).ready(function(){
jQuery(".josito2").mouseover(function(){
    jQuery(".oros").addClass("blur");
        });
});

我添加了这个，所以当我拿走鼠标时，它将恢复正常：

jQuery(document).ready(function(){
jQuery(".josito2").mouseleave(function(){
    jQuery(".oros").removeClass("blur");
        });
});

HTML标记：

<td>
                                      <div class="oros">{postrow.displayed.POSTER_AVATAR}</div>
                                        </td><td class="oros12">
                    <div class="josito"><div class="josito2"><div id="josito3">

                                        <div class="oros2"><div class="plate">{postrow.displayed.POSTER_NAME}</div>
                                              <div class="oros3">{postrow.displayed.POSTER_RANK_NEW}</div></div>
                </div></div></div>

                                        </td>

（这只是整个事情的一部分）
请注意：
 1.英语不是我的母语，因此，如果您需要进一步的解释，请告诉我：）
 2.我从这里的其他答案中获得了代码，非常感谢那些编写它的人。

先感谢您。

最佳答案

尝试使用event target。

jQuery("josito2").mouseover(function(e){
  jQuery(e.target).addClass("blur");
});

jQuery(".josito2").mouseleave(function(e){
  jQuery(e.target).removeClass("blur");
});