jQuery的問題CSS時，從樹視圖拖動項目

我有一個樹形菜單，用戶可以拖動一些東西，並放在列表（如帶有標籤的Gmail）。一切正常99％。當鼠標懸停在樹狀視圖中的一個項目時，背景顏色發生了變化（這對我來說沒問題）。當鼠標離開物品時，背景會變回白色。問題是，（jQuery）的拖動開始時，項目背景被改變，並沒有像往常一樣回到白色（刷新問題？）。jQuery的問題CSS時，從樹視圖拖動項目

如何繼續（當拖動開始？）來安排這個小問題？

我已經嘗試：

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

但它是不可接受的，因爲css被徹底改變（不再有懸停/離開差異）。我需要像刷新項目。我看到，如果我將鼠標懸停在項目上（在拖放操作之後），背景會回到白色（因爲它應該）。

截圖1 first image

在我們在樹視圖看到用戶鼠標在一個項目，這樣的背景顏色是淺藍色的該第一屏幕截圖。這次沒有拖放，所以對我來說可以。

截圖2 second image

的截圖2用戶拖動一個項目，我們看到拖幫手。問題是，樹視圖中的原始itm仍然是藍色的！惱人的...

如果drag'n下降被取消或完成，用戶將鼠標懸停這個藍色的項目，它會變回白色背景，但爲時已晚......

編輯我的問題作出迴應Phortuin

@Phortuin：對了mouseenter，鼠標離開事件都與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）？

來源

2011-04-15 Bronzato

你能發表一些代碼嗎？最好在http://jsfiddle.net上有一個工作示例？ – Khez 2011-04-15 09:17:06

@Khez：我添加了2個截圖。希望能幫助到你。謝謝。 – Bronzato 2011-04-15 10:17:49

我找到了解決方法如下（以保持我的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'); 
    });

來源

2011-04-17 16:22:21 Bronzato

原因可能是mouseLeave事件從未觸發（懸停是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：- 你可以在拖動的方法的回調觸發自定義事件：

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

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

來源

2011-04-15 10:16:58 Phortuin

jQuery的問題CSS時，從樹視圖拖動項目

回答

相關問題