在jquery中启用悬停

Question

我整理了一个简单的小提琴来尝试解决我想要做的事情。基本上我有一个编辑器，用户可以在上面操作不同的元素。当用户将鼠标悬停在可编辑的元素上时，通过 css 会出现方格轮廓。一旦用户单击轮廓更改为实心轮廓以指示这是现在可编辑的元素，因此我删除了单击时的悬停事件，因此如果他们在页面周围移动鼠标，则不会在其他可编辑元素周围出现方格线在页面上，基本上锁定了它们，除了被选中的那个。

如果用户决定不编辑该元素，我有一个按钮可以让他们返回并“取消”重新启用应该悬停在所有可编辑元素上。到目前为止，一旦我将其置于锁定状态，我就无法再次启用该事件。

这是一个小提琴 http://jsfiddle.net/ZqfTX/276/

$('.element').on({
    mouseover: function(){
        $(this).css({'outline':'2px dashed red'});
    },
     mouseleave: function(){
        $(this).css({background: '#CCC'});
    },
    click: function(){
        $(this).off('mouseover');
        $(this).off('mouseleave');
        $(this).css({'outline':'2px solid #369fe4'});
    }
});

$('#button').click(function(){
      $('.element').on('mouseover');
      $('.element').on('mouseleave');

});

有人可以看看，让我知道为什么我无法使用 .on 重新启用该活动

Answer 1

你需要重置你想要触发on("mouseover")的function

function setHover(){
    $('.element')
        .css({'outline':'none'})
        .off('mouseover mouseleave click')
        .on({
            mouseover: function(){
                $(this).css({'outline':'2px dashed red'});
            },
             mouseleave: function(){
                 $(this).css({'outline':'none', background: '#CCC'});
            },
            click: function(){
                $('.element').off('mouseover mouseleave click');
                $(this).css({'outline':'2px solid #369fe4'});
            }
        });
}

$('#button').click(function(){
   setHover();
});

setHover();

Answer 2

HTML：

<div class="element inactive"></div>
<br>
<div id="button"><a href="#">Cancel Editing</a></div>

JS：

$(document).on({
    mouseleave: function(){
        $(this).css({background: '#CCC'});
    },
    click: function(){
        $(this).toggleClass('inactive active');
    }
}, '.element.inactive');

$('#button').on('click',function(){
      $('.element.active').toggleClass('inactive active');    
});

CSS：

.element{
    position:absolute;
    top:60px;
    left:100px;
    background: #ccc;
    width: 200px;
    height: 120px;
}
.element.inactive:hover {
    outline: 2px dashed red;
}
.element.active {
    outline: 2px solid #369f34;
}

FIDDLE