如何在悬停时对点击进行更改？

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/