如何在懸停時對點擊進行更改？

Question

我試圖改變一個文本顏色時，在方塊上懸停，然後保持點擊更改。

我用jQuery;該廣場是有ho類的div：

$('#bg1').on({ 
    mouseover: function(){ 
     $('span').css("color","orange"); 
    }, 
    mouseleave: function(){ 
     $('span').css("color",$('#currentColor').css("color")); 
    }, 
    click: function(){ 
      $('.ho').on('mouseleave'); 
     $(this).off('mouseleave'); 
     $('#currentColor').css("color","orange") 
    } 
}); 



$('#bg2').on({ 
    mouseover: function(){ 
     $('span').css("color","magenta"); 
    }, 
    mouseleave: function(){ 
     $('span').css("color",$('#currentColor').css("color")); 
    }, 
    click: function(){ 
      $('.ho').on('mouseleave'); 
     $(this).off('mouseleave'); 
     $('#currentColor').css("color","magenta") 
    } 
}); 

只看到小提琴：http://jsfiddle.net/ZqfTX/868/

它工作在第一：當我點擊一個立方體，它使文本顏色，當我將鼠標懸停在該立方體上以查看其他懸停點（無點擊），我可以看到它們的效果，並且向外移動可以很好地回到點擊立方體的顏色。 但是，當點擊另一個立方體並再次測試時：它全部中斷..

爲什麼會發生這種情況？

Answer 1

您的點擊功能不需要：$(this).off('mouseleave'); && $(this).off('mouseleave');。

$('#bg1').on({ 
 
    mouseover: function(){ 
 
     $('span').css("color","orange"); 
 
    }, 
 
    mouseleave: function(){ 
 
     $('span').css("color",$('#currentColor').css("color")); 
 
    }, 
 
    click: function(){ 
 
    // \t $('.ho').on('mouseleave'); 
 
    // $(this).off('mouseleave'); 
 
     $('#currentColor').css("color","orange") 
 
    } 
 
}); 
 

 

 

 
$('#bg2').on({ 
 
    mouseover: function(){ 
 
     $('span').css("color","magenta"); 
 
    }, 
 
    mouseleave: function(){ 
 
     $('span').css("color",$('#currentColor').css("color")); 
 
    }, 
 
    click: function(){ 
 
    // $('.ho').on('mouseleave'); 
 
     // $(this).off('mouseleave'); 
 
     $('#currentColor').css("color","magenta") 
 
    } 
 
});

這裏是工作提琴： http://jsfiddle.net/ZqfTX/871/

Answer 2

正常工作與此

$('#bg1').on({ 
    mouseover: function(){ 
     $('span').css("color","orange"); 
    }, 
    mouseleave: function(){ 
     $('span').css("color",$('#currentColor').css("color")); 
    }, 
    click: function(){ 
     //$('.ho').on('mouseleave'); 
     //$(this).off('mouseleave'); 
     $('#currentColor').css("color","orange") 
    } 
}); 

$('#bg2').on({ 
    mouseover: function(){ 
     $('span').css("color","magenta"); 
    }, 
    mouseleave: function(){ 
     $('span').css("color",$('#currentColor').css("color")); 
    }, 
    click: function(){ 
     //$('.ho').on('mouseleave'); 
     //$(this).off('mouseleave'); 
     $('#currentColor').css("color","magenta") 
    } 
}); 

當你點擊並執行：

$(this).off('mouseleave'); 

內的功能：

mouseleave: function(){ // code } 

不工作了，因爲你刪除事件處理程序 ，只能執行鼠標懸停處理程序，正因爲如此，它設置，當你徘徊在 顏色。

欲瞭解更多信息： http://api.jquery.com/off/