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

Question

这是我目前所拥有的: 一个作为“oros”类的头像图像。在它之上，我还有另一个类，名为“josito”。 josito 包含个人资料信息，它是隐藏的，因此当您将鼠标悬停在头像上方时，它会自行显示。

问题:同时，我希望成像的头像变得模糊。我有点用 JS 实现了它。因此，当我将鼠标悬停在 josito 上时，oros 会变得模糊。我说“有点”是因为 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.我从这里的其他答案中得到了代码，非常感谢编写它的人。

提前致谢。

Answer 1

尝试使用event target .

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

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