keep:将鼠标悬停在拖动jquery元素上

keep :hover on dragging jquery element

本文关键字：拖动 jquery 元素 悬停 鼠标 keep      更新时间：2023-09-26

我有一个站点，其中有一个元素，CSS类有一个显示轮廓的：悬停状态。这还可以。但是：

  1. 当我开始拖动这个对象（可排序对象的一部分）时，悬停效果会被移除，Jquery draggable不会保持：hover状态。

  2. 一旦删除，css悬停状态将不会再次出现，我必须离开对象并重新输入它以使css效果出现。

有办法解决这些问题吗？

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

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

通过绑定开始和停止来添加和删除可排序文件中的类，如：

$("#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/

我不认为这种东西是在浏览器之间统一实现的，所以根据您使用的浏览器，您可能会遇到不同的行为。最好的办法是在mouseenter时向元素中添加一个CSS类，在mouseleave时删除该类。

相关文章：