Javascript 转到mouseleave上最后单击的元素

我正在努力实现的是：

mouseenter：在悬停5个框中的1个框后，节的背景会发生变化，具体取决于这5个框中的哪一个被悬停

单击：在5个框中的一个框上单击后，下面部分的背景会在相应的图像上停止，具体取决于单击的框

mouseleave：此事件发生后，该部分的背景应返回到上次单击的背景，如果没有单击，则返回默认选择的背景

这是我做的一支笔，更容易理解我想要完成的任务：

---

问题是，在我已经单击一个框并再次悬停后，它将返回到默认选中的（-3）。

1st:您需要将

单击的=“yes”

添加到活动框中

<div class="box active" clicked="yes">
  <p>3</p>
</div>

3rd无需使用

$default

或使用

if

语句检查

在
mouseleave（）上单击的
属性。。使用
.filter（）

我试图复制你在代码笔中遇到的问题，我无法删除我的旧评论，因为我设法让它正常工作，但由于某种原因，当我删除鼠标时，在第一次悬停（没有单击）时，活动将转到我的最后一个$box，而不是我在html中设置的默认值。我确实这样做了。我看到它在那里工作，我真的不明白为什么它对我不起作用。这是我正在构建的wordpress网站，但结构和逻辑是一样的。出于某种原因，删除整个[clicked]检查对我来说是可行的。我有点困惑：@MindPhuq在没有
[点击]
的情况下工作真是太好了。。你为什么这么困惑？？
<div class="box active" clicked="yes">
  <p>3</p>
</div>

 jQuery($box).removeAttr('clicked');

$section.removeClass('active');
$section.eq(jQuery($box).filter('.active[clicked]').index()).addClass("active");