Question

我有一个树形视图菜单，用户可以拖动某些内容并放在列表中（例如带标签的gmail）。一切都是99％。当鼠标悬停在树视图中的项目时，背景颜色发生了变化（这对我来说没问题）。当鼠标离开项目时，背景将变回白色。问题是当（jquery）拖动开始时，项目背景被更改并且没有像往常那样恢复到白色（刷新问题？）。

我如何继续（当拖动开始？）来安排这个小问题？

我已经尝试过了：

$（本）。儿童（）的CSS（ '背景色'， '＃FFFFFF'）;

但这是不可接受的，因为css已明确改变（不再有悬停/离开差异）。我需要像刷新项目一样的东西。我看到如果我将鼠标悬停在项目上（在拖放操作之后），背景将恢复为白色（应该如此）。

截屏1 first image

在第一个屏幕截图中，我们看到用户将鼠标悬停在树视图中的项目上，因此背景颜色为浅蓝色。这次没有阻力下降对我来说没问题。

截图2 second image

在屏幕截图2上，用户拖动一个项目，我们看到帮助器被拖动。问题是树视图中的原始itm仍然是蓝色的！烦人...

如果取消或完成拖拽，并且用户将鼠标移到此蓝色项目上，它将变回白色背景但为时已晚......

我编辑我的问题以回复Phortuin

@Phortuin：mouseenter，mouseleave事件都是用css管理的，如下所示：

.treeview li{ 
  margin-top: 2px;
  margin-bottom: 2px;
  padding-left: 20px; 
  list-style: none;  
}

.treeview li a:hover
{    
  background-color: #f3f7fd;
  border-color: #bbd8fb;
  border-width: 1px;
  border-style: solid;  
}

所以，如果我不知道如何继续。

另一种解决方案是使用jquery管理mouseover / mouseleave事件，因为你向我展示但是可能有一个更简单的解决方案（并保留我的CSS）？

Answer 1

原因可能是从未触发过mouseLeave事件（hover是mouseEnter和mouseLeave的包装器）。类似的结构是这样的：

<a href="http://stackoverflow.com" target="_blank"><img src="/images/stackoverflow.gif" alt="" /></a>

使用以下jQuery我在悬停时更改图像：

$("img").hover(function(){
    $(this).attr("src").val("/images/stackoverflow-hover.gif");
}, function() {
    $(this).attr("src").val("/images/stackoverflow.gif");
});

现在，当我将鼠标悬停在图像上并单击该链接时，将在新选项卡或窗口中打开该站点，当我切换回原始站点时，该图像仍将具有stackoverflow-hover.gif图像，因为从未触发mouseLeave事件。

您需要做的是确保实际触发您想要的行为。你可以这样做：

$("span.item").mouseenter(function(){
    $(this).addClass("active");
});
$("span.item").bind("mouseleave blur mouseout", function(){
    $(this).removeClass("active");
});

bind方法允许您将多个事件绑定到元素，所有这些都会导致相同的行为。尝试使用几个事件来查看效果。此外，您可以通过jQuery了解自己触发事件：http://api.jquery.com/trigger/ - 您可以在拖动方法的回调中触发自定义事件：

$("span.item").drag(function(){
    // do some dragging
}, function() {
    this.trigger("myEvents:draggingIsFinished");
});

$("span.item").bind("myEvents:draggingIsFinished", function(){
   // do stuff after dragging
});

Answer 2

我找到了一个解决方案如下（保持我的css原样）：

    $('#treemenu1 ul li a').hover( function(){ 
        $(this).css('background-color', '#f3f7fd');
        $(this).css('border-color', '#bbd8fb');
    });

    $('#treemenu1 ul li a').mouseleave( function(){ 
        $(this).css('background-color', 'transparent');
        $(this).css('border-color', 'transparent');
    });

从treeview拖动项目时的jquery问题css

2 个答案: