jQuery - 如何用悬停覆盖背景颜色动画？

我是jQuery的新手，需要一些帮助解决以下问题。jQuery - 如何用悬停覆盖背景颜色动画？

我有一个简单的数据表（20行4列）在网页上（asp.net mvc）。注意 - 我使用<div>标签而不是<table> <td> <tr>标签建立了表格。

对于每一行都有汇总数据，然后单击该行右侧的“编辑记录”选项。点击“编辑记录”可以看到更多的信息。

这里是一个图案：（在“真正的”表NB的名称/日期是真实姓名/日期等）

---------------------------------------------------------------------------- 
Name     Date    Status    [ Edit Record] 
---------------------------------------------------------------------------- 
Name     Date    Status    [ Edit Record] 
----------------------------------------------------------------------------

有四种效果我想创建：

当用户将鼠标悬停在一排的背景颜色改变
当用户点击“编辑记录”的更多信息可见度翻转
当附加信息可见背景颜色的变化。
当附加信息被隐藏在背景颜色默认为白色

到目前为止，我有以下的jQuery代码几乎工作（见问题在底部）：

该代码处理“悬停“效果（1）：

$("div.record").hover(function() { 
     $(this).addClass("recordhover"); 
      }, function() { 
       $(this).removeClass("recordhover"); 
});

该代码处理的附加信息和背景颜色的可见性（2,3,4）：

$("div.recordtopline > div.recorddetail").click(function(event) { 
     if (this == event.target) { 
      if ($(this).parent("div").next(".recordbelowline").is(':hidden')) { 
       $(this).parent("div").next(".recordbelowline").show(); 
       $(this).parent("div").parent("div").animate({backgroundColor: "#FFEFC6" }, 'fast'); 
       } 
       else { 
        $(this).parent("div").next(".recordbelowline").hide(); 
        $(this).parent("div").parent("div").animate({ backgroundColor: "#FFF" }, 'fast'); 
       } 
       return false; 
      } 
     });

问题

当我加载网页，悬停效果完全适用于所有行。但是，如果我选择了“编辑记录”以查看更多信息，然后隐藏了附加信息，则悬停效果不再适用于该行，即根据我的动画代码，backgorund颜色保持为白色。

我该如何克服这个问题，使悬停效果'覆盖'背景动画效果？

来源

2010-04-23 Alex P

当你直接在元素上设置样式（与element.style.thing=或$(element).css()或者，在这里，animate），你有效增加内嵌style=""属性持有该规则。内联样式总是覆盖样式表规则。

所以设置背景回到了它之后，你就必须删除的规则：

var record= $(this).parent('div').parent('div'); 
record.animate(
    {backgroundColor: '#FFF'}, 
    {duration: 'fast', complete: function() { 
     record.css('backgroundColor', ''); 
    }} 
);

您是否使用了一些插件，使动画的backgroundColor工作？通常情况下不会。如果您不需要动画，则只需在选中/取消选中时添加/删除行中的类并让样式表处理它即可。

来源

2010-04-23 09:53:32 bobince

我正在使用彩色动画插件，我从jQuery下载。如果我正确地理解了你，你说使用样式表和jQuery的'addClass'和'removeClass'功能可以更容易地达到预期的效果。仅供参考，如果改变了任何东西，我需要支持Ie6 – 2010-04-23 10:17:58

完美实现了这项工作。喜欢它。这么简单，我觉得很愚蠢！非常感谢您的帮助。 – 2010-04-23 10:23:21

两个备注：

如果IE6的兼容性不是一个问题，你不需要绑定悬停效果，只要使用CSS：在你的DIV悬停选择。
一旦直接在div上应用样式，该样式将覆盖以前的更改，因此一旦细节div变为隐藏，您必须移除背景颜色：$（yourDiv）.css（'backgroundColor'，''）;

来源

2010-04-23 09:57:45 mamoo

很让我懊恼的是，现在支持IE6是需要... – 2010-04-23 10:13:33

jQuery - 如何用悬停覆盖背景颜色动画？

回答

相关问题