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

【问题标题】：jQuery - How can I override a background color animation with hover?jQuery - 如何用悬停覆盖背景颜色动画？
【发布时间】：2010-04-23 17:57:45
【问题描述】：

我是 jQuery 新手，需要一些帮助来解决以下问题。

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

对于每一行，都有汇总数据，然后在该行的右侧单击“编辑记录”选项。单击“编辑记录”将使附加信息可见。

这是一张图片：（在“真实”表中，姓名/日期是真实姓名/日期等）

----------------------------------------------------------------------------
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;
            }
        });

问题

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

如何克服这个问题，让悬停效果“覆盖”背景动画效果？

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

当您直接在元素上设置样式时（使用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', '');
    }}
);

您是否正在使用一些插件来制作动画背景颜色？通常不会。如果您不需要动画，则操作起来要简单得多，只需在选中/取消选中时在行上添加/删除一个类并让样式表处理它。

【讨论】：

我正在使用从 jQuery 下载的彩色动画插件。如果我理解正确，您是说使用样式表和 jQuery 的“addClass”和“removeClass”功能更容易达到预期的效果。仅供参考，如果有任何改变，我需要支持 Ie6
完美运行。很喜欢。太简单了，我觉得很笨！非常感谢您的帮助。

【解决方案2】：

两个备注：

如果 IE6 兼容性不是问题，则无需绑定悬停效果，只需在 div 上使用 css :hover 选择器即可。
一旦您直接在 div 上应用样式，该样式将覆盖您之前的更改，因此您必须在详细 div 隐藏后移除背景颜色：$(yourDiv).css('backgroundColor', '');

【讨论】：