例如筋斗云的效果,但不通过offset定位的flag标记

效果:mouseenter到li上出现背景图片,mouseleave后背景图片消失,click以后该背景图片被锁定

问题:简单的mouseenter,mouseleave和click事件不能达到预期的效果,因为当click事件结束后,同时也会触发mouseleave事件

解决方案:我们给每一个li一遍循环,给li动态添加flag属性,默认值为true,是这样的我们判断当flag为false给该li设置背景图片,为true给清空;所以当mouseenter的时候,给移入的li设置背景图片;当鼠标点击li的时候给li的flag设置为取反,而其余兄弟li的flag均赋予true的属性,给点击的li设置背景图片;最后通过判断flag来决定是否触发mouseleave事件,循环遍历li,如果li的flag为true的背景图片清空

 

代码示例,不完全针对这个,有html结构的差别

　　

$(function () {
    $li = $(".gywm-content .content-main-left li");
    $($li[0]).find("a")
        .css({
            "background": "url('image/guanyuwomen_anniu_xuanzhogn.png')"
            , "color": " #ff2826"
        });
    $li.each(function (index, ele) {
        ele.flag = true;
    })
    $li.mouseenter(function () {
        $li.index = $(".gywm-content .content-main-left li").index($(this));
        $(this).find("a").css({
            "background": "url('image/guanyuwomen_anniu_xuanzhogn.png')"
            , "color": " #ff2826"
        });
    });
    $li.click(function () {
        $(this).siblings().each(function (index, ele) {
            ele.flag = true;
        });
        this.flag = !this.flag;
        $li.index = $(".gywm-content .content-main-left li").index($(this));
        $(".gywm-content .content-main-right li").removeClass("show");
        $(".gywm-content .content-main-right li").eq($li.index).addClass("show");
        $(this).find("a").css({
            "background": "url('image/guanyuwomen_anniu_xuanzhogn.png')"
            , "color": " #ff2826"
        });
    })
    $li.mouseleave(function () {
        $li.each(function (index, ele) {
            if (ele.flag) {
                $(ele).find("a")
                    .css({
                        "background": ""
                        , "color": " #333333"
                    });
            }
        })
    });
})