Question

我正在尝试在悬停在正方形上时更改文字颜色，然后在点击时保留该更改。

我使用了jQuery;正方形是具有size类的div：

static

只看小提琴：IDEONE demo

它首先起作用：当我点击一个立方体时，它保持文本颜色，当我将鼠标悬停在该立方体上以查看其他悬停点（没有点击）时，我看到了它们的效果，并且移出了很好的返回到被点击的立方体的颜色。但是，当点击另一个立方体并再次测试时：它全部中断..

为什么会发生这种情况？

Answer 1

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

＆＃13;

$('#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")
    }
});

＆＃13;

＆＃13; 以下是工作小提琴： 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/

如何在点击时保存更改？

2 个答案: