Question

我想要完成的是：

mouseenter ：悬停 5个框中的1个后，某个部分的背景会发生变化，具体取决于这5个中的哪一个悬停。
< / LI>
点击：在5个方框中的一个上点击后，相应图片上的部分背景将停止，具体取决于所点击的框。< / p>
mouseleave ：此事件发生后，该部分的背景应返回上次点击的部分，如果没有点击，则返回默认值。

这是我做的笔，更容易理解我想要完成的任务：https://codepen.io/karamanliev/pen/YewOpG

$box = jQuery(".box");
$boxes = jQuery(".boxes");
$section = jQuery(".section-bg");
$default = jQuery(".--3");

jQuery($box).mouseenter(function() {

    $section.eq(jQuery(this).index()).siblings().removeClass("active");
    $section.eq(jQuery(this).index()).addClass("active");

    jQuery($box).click(function() {

        $section.eq(jQuery(this).index()).siblings().removeClass("active");
        $section.eq(jQuery(this).index()).addClass("active");

        jQuery(this).attr('clicked', 'yes'); 
        return true;

    });
}).mouseleave(function() {

    if (jQuery(this).attr('clicked') != 'yes') {
        $section.eq(jQuery(this).index()).removeClass("active");
        $default.addClass("active");

    }

});

问题在于我已经点击了一个框并再次悬停，它将默认返回到选中状态（ - 3）。

Answer 1

1st：您需要将clicked="yes"添加到有效框

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

第二您需要从非活动框中删除clicked属性

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

第3次无需使用$default或使用if语句检查clicked上的mouseleave()属性..足以使用{ {1}}

.filter()

CodePen

转到mouseleave上最后一次单击的元素

1 个答案: