Question

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

我在网页（asp.net mvc）上有一个简单的数据表（20行乘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;
            }
        });

问题

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

如何克服此问题，以便悬停效果“覆盖”背景动画效果？

Answer 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', '');
    }}
);

你是否正在使用一些插件来制作动画backgroundColor？通常它不会。如果您不需要动画，那么只需在选中/取消选中时添加/删除行上的类并让样式表处理它就会更简单。

Answer 2

两个评论：

如果IE6兼容性不是问题，则不需要绑定悬停效果，只需在div上使用css：hover选择器。
直接在div上应用样式后，样式会覆盖以前的更改，因此一旦隐藏了细节div，就必须删除背景颜色：$（yourDiv）.css（'backgroundColor'，''）;

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

2 个答案: