Jquery 不绑定事件加载

Question

(function() {
var bgOn;
$(".ContainingBox").on('hover', function() {
    function() { 
    bgOn = $(this).css("background-color");
            $(this).css("background-color", "#e5fff8");
      }, function() {
      $(this).css("background-color", bgOn);
      }
 });
})();

我想绑定悬停事件。当我没有将其包装在匿名函数中并使用.hover() 时，此代码工作正常。但是，我们要求不使用全局变量。所以我需要绑定事件！

这不可能吗？

Answer 1

您的代码存在语法错误，特别是on()不接受多个回调等。
此外，没有本机hover事件，您应该改用mouseenter和mouseleave

$(".ContainingBox").on({
    mouseenter: function() {
        $(this).data('bg', $(this).css("background-color"));
        $(this).css("background-color", "#e5fff8");
    },
    mouseleave: function() {
        $(this).css("background-color", $(this).data('bg'));
    }
});

使用jQuery的data()，而不是单个变量，将记住每个元素的背景颜色

小提琴

Answer 2

试试这个....

(function() {
       var bgOn;
       $(".ContainingBox").on('mouseover', function() {
          function() { 
             bgOn = $(this).css("background-color");
             $(this).css("background-color", "#e5fff8");
          }, function() {
               $(this).css("background-color", bgOn);
             }
       });
 })();