Question

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

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

这是一个小提琴 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

您需要重置要function

的on("mouseover")

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

关闭jquery后启用悬停

2 个答案: