鼠标hover时更改背景颜色，并在mouseout后删除它

我有桌子哪个类是forum 。 我的jquery代码：

  $(document).ready(function() { $('.forum').bind("mouseover", function(){ var color = $(this).css("background-color"); $(this).css("background", "#380606"); $(this).bind("mouseout", function(){ $(this).css("background", color); }) }) })  

它完美有效，但有可能以更有效的方式做到没有var color = $(this).css("background-color"); 。 在mouseout之后离开之前的背景颜色并删除#380606 ？ 谢谢。

Answer 1

如果你不关心IE≤6，你可以使用纯CSS ……

 .forum:hover { background-color: #380606; } 

 .forum { color: white; } .forum:hover { background-color: #380606 !important; } /* we use !important here to override specificity. see http://stackoverflow.com/q/5805040/ */ #blue { background-color: blue; } 

  
Red
 
Green
 
Blue 

Answer 2

在CSS文件中设置原始背景颜色：

 .forum{ background-color:#f0f; }​ 

您不必在jQuery中捕获原始颜色。 请记住，jQuery将改变INLINE样式，因此通过将background-color设置为null，您将获得相同的结果。

 $(function() { $(".forum").hover( function() { $(this).css('background-color', '#ff0') }, function() { $(this).css('background-color', '') }); });​ 

Answer 3

试试这个，它的工作和简单

HTML

 ​​​​​​​​​​​​​​​​​​​​​   
 test 
  ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

使用Javascript

 $(document).ready(function() { var colorOrig=$(".forum").css('background-color'); $(".forum").hover( function() { //mouse over $(this).css('background', '#ff0') }, function() { //mouse out $(this).css('background', colorOrig) }); });​ 

css

 .forum{ background:#f0f; }​ 

现场演示

http://jsfiddle.net/caBzg/

Answer 4

这应该直接在CSS中设置。

 .forum {background-color: #123456} .forum:hover {background-color: #380606} 

如果您担心IE6不会接受将鼠标hover在非链接的元素上，您可以使用jQuery的hover事件来实现兼容性。

Answer 5

HTML：

jQuery的：

 $('#id').hover(function(){ $("#hiddenDiv").css('display','block'); }, function(){ $("#hiddenDiv").css('display','none'); } ); 

Answer 6

经过多次斗争终于搞定了。 （完美测试）

以下示例还将支持这样一个事实，即已点击按钮的颜色不应更改

JQuery代码

 var flag = 0; // Flag is to check if you are hovering on already clicked item $("a").click(function() { $('a').removeClass("YourColorClass"); $(this).addClass("YourColorClass"); flag=1; }); $("a").mouseover(function() { if ($(this).hasClass("YourColorClass")) { flag=1; } else{ $(this).addClass("YourColorClass"); }; }); $("a").mouseout(function() { if (flag == 0) { $(this).removeClass("YourColorClass"); } else{ flag = 0; } }); 

Answer 7

这是我的解决方案：

 $(document).ready(function () { $( "td" ).on({ "click": clicked, "mouseover": hovered, "mouseout": mouseout }); var flag=0; function hovered(){ $(this).css("background", "#380606"); } function mouseout(){ if (flag == 0){ $(this).css("background", "#ffffff"); } else { flag=0; } } function clicked(){ $(this).css("background","#000000"); flag=1; } })