Question

我有一个带有元素的网站，其中CSS类具有：显示轮廓的悬停状态。这没问题。但是：

当我开始拖动此对象（可排序的一部分）时，悬停效果被删除，Jquery draggable不会保持：悬停状态。
一旦丢弃，css悬停状态就不会重新出现，我必须离开对象并重新输入以使css效果出现。

有什么方法可以解决这些问题吗？

Answer 1

在CSS声明中添加一个类，如：

.object:hover,
.object.hover {
    border: 1px solid red;
}

通过绑定到start和stop来添加和删除sortable中的类，如：

$("#list").sortable({
    [..your other configs..],
    start: function( e, ui){
        ui.item.addClass('hover');
        ui.helper.addClass('hover');
    },
    stop: function( e, ui){
        ui.item.removeClass('hover');
        ui.helper.removeClass('hover');
    }
});

如果你想在删除后保留悬停类，你可以试试这个：

$(".object").mouseenter( function(){
    $(this).addClass("hover");
}).mouseleave( function(){
    $(this).removeClass("hover");
});
$("#list").sortable({
    [..your other configs..],
    start: function( e, ui){
        ui.item.addClass('hover');
        ui.helper.addClass('hover');
    },
    stop: function( e, ui){
        // don't remove: ui.item.removeClass('hover');
        // don't remove: ui.helper.removeClass('hover');
    }
});

请参阅此处的小提琴：http://jsfiddle.net/9bvm63m4/

Answer 2

我不认为这种事情是在浏览器中统一实现的，因此根据您使用的浏览器，您可能会遇到不同的行为。最好的办法是在mouseenter上为你的元素添加一个CSS类，并在mouseleave时删除该类。

keep：悬停在拖动jquery元素上

2 个答案: