代码之家 › 专栏 › 技术社区 › Alex P

jquery-如何使用悬停覆盖背景色动画?

asp.net-mvc jquery

Alex P · 技术社区 · 16 年前

我是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颜色将保持为白色。

如何克服这个问题,使悬停效果“超过”背景动画效果?

2 回复 | 直到 16 年前

bobince 16 年前

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

你在用插件来制作背景色动画吗?通常不会。如果不需要动画,只需在选中/取消选中行时添加/删除该行上的类,并让样式表处理它,这样做会简单得多。

mamoo 16 年前

两个备注:

如果ie6兼容性不是问题,您不需要绑定悬停效果,只需在div上使用css:hover选择器。
一旦直接在div上应用样式,该样式将覆盖以前的更改,因此一旦detail div变为隐藏,就必须删除背景色:$(yourdiv.css('background color','');