使用变量jQuery CSS悬停

如何使用jQuery将先前捕获的变量传递到背景属性？我正在处理一个非常大的表格，大量的单元格和大量的数据。有多种颜色被使用，被应用到表格而不是单元格（有很好的理由）。使用变量jQuery CSS悬停

这里是我的代码（大大浓缩HTML）

<table> 
    <tr> 
     <td class="nonLevel"><ul class="list"><li>text to go here</li></ul></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
    </tr> 
</table> 


$(".block").hover(function() { 
    var myColor = $(this).css("background-color"); 

    $(this).css({'background-color' : 'yellow'}); 
    }, function() { 
     var cssObj = { 
      'background-color' : myColor, 
     } 
     $(this).css(cssObj); 
    });

所以我试图捕捉侧翻原来的颜色（当我通过myColor可变进警报其中工程），然后更改颜色变为黄色，然后在展开后切换回“myColor”。

我看过addClasss和removeClass，但他们似乎并没有削减它的设置方式。同样，背景颜色是在CSS中设置的，而不是单元格，这是不能改变的。

来源

2010-11-22 Keith

您的这条线后缺少分号`变种cssObj = { “背景颜色” ：myColor， }' – 2010-11-22 14:47:28

另外，'cssObj`结尾的逗号会使IE崩溃。 – 2010-11-22 14:55:37

你并不需要存储背景颜色 - 甚至是使用JavaScript/jQuery。您只需可以使用CSS：

.block:hover { 
    background-color: yellow; 
}

如果你有使用JavaScript（例如，因为你需要支持IE6），只需设置背景色为空：

$(".block").hover(function() { 
    $(this).css("background-color", "yellow"); 
}, function() { 
    $(this).css("background-color", ""); 
});

如果你还是觉得你需要存储的颜色，使用jQuerys数据功能：

$(".block").hover(function() { 
    $(this).data("background-color", $(this).css("background-color")); 
    $(this).css("background-color", "yellow"); 
}, function() { 
    $(this).css("background-color", $(this).data("background-color")); 
});

来源

2010-11-22 14:56:39 RoToRa

你可以充塞现有的颜色为数据属性：

$(".block").hover(function() { 
    $(this).data("bkg",$(this).css("background-color")); 
    $(this).css('background-color', 'yellow'); 
}, function() { 
    $(this).css("background-color", $(this).data("bkg")); 
});

来源

2010-11-22 14:50:10 Keltex

谢谢马特。你是对的。 – Keltex 2010-11-22 14:53:21

虽然有效，除非有其他建议吗？ – Keith 2010-11-22 14:55:40

我相信你已经申报了jQuery调用的外部您myColor变量。否则，它应该是一个局部变量，这意味着它将在handlerOut上第二次调用悬停之前超出范围。

来源

2010-11-22 14:50:18

来处理这个问题，特别是如果你的表是大最好的方法，就是用.live()和.data() 。

$('.block').live('mouseover mouseout', function(event) { 
    var $this = $(this); 
    if (event.type === 'mouseover') { 
     var myColor = $this.css('background-color'); 
     $this.data('myColor', myColor); 
     $this.css('background-color': 'yellow'); 
    } else { 
     $this.css('background-color', $this.data('myColor')); 
    } 
});

Hot demo action →

来源

2010-11-22 14:58:59

你也可以使用jQuery数据存储原来的颜色。然后在mouseout上获取它。

$(".block").each(function (index, elem) { 
    $(elem).data('orginalColor', $(elem).css("background-color")) 
}).hover(function() { 
    $(this).css({'background-color' : 'yellow'}); 
}, function() { 
    $(this).css({'background-color' : $(this).data('orginalColor')}); 
});

你可以阅读有关jQuery的数据在这里：jQuery Data

而且我会建议使用委托，而不是（jQuery使用它内部在某些情况下你）。此绑定只有一个事件处理程序整个表而不是一个用于每个“TD”

$('.block').each(function (index, elem) { //code }); 
$('table').delegate('td', 'mouseover', function() { //code }); 
$('table').delegate('td', 'mouseout', function() { //code });

..fredrik

来源

2010-11-22 14:59:30 fredrik

使用变量jQuery CSS悬停

回答

相关问题