在jQuery中悬停表格行时存储背景颜色

我有一个ASP.NET GridView。每行都有不同的颜色，具体取决于其中一个显示字段的值。有两种可能的值，因此可以有两种不同的颜色。在jQuery中悬停表格行时存储背景颜色

现在我想突出显示在鼠标悬停的GridView上的行。下面的脚本完美无缺，但是一旦我将鼠标悬停在外，任何行的颜色都会变成白色。

我想知道是否有一种方法来存储鼠标悬停时行的“原始”颜色，并将鼠标悬停后放回。

  $(document).ready(function() { 
      $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
        $(this).css("background-color", "Lightgrey"); 
       }, function() { 
        $(this).css("background-color", "#ffffff"); 
       }); 

      });

我尝试这个解决方案，似乎很符合逻辑的我，但它不工作，因为脚本不存储颜色值，一旦它完成执行：

$(document).ready(function() { 
      $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
        var color = $(this).css("background-color"); 
        $(this).css("background-color", "Lightgrey"); 
       }, function() { 
        $(this).css("background-color", "#ffffff"); 
       }); 
      });

任何人都可能会提供一个解决方案？由于

来源

2011-10-05 CiccioMiami

顺便说一句你的解决方案的问题是'color'变量只存在于*函数定义的函数中（'hoverIn'）。它永远不能通过'hoverOut'函数访问。 – jensgram

您可以在以前的（原来的）值存储在data属性：

$(document).ready(function() { 
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
     var $this = $(this); 

     if (!$this.data('originalBg')) { // First time, no original value is set. 
      $this.data('originalBg', $this.css('background-color')); // Store original value. 
     } 
     $this.css("background-color", "Lightgrey"); 
    }, function() { 
     var $this = $(this); 

     $this.css("background-color", $this.data('originalBg')); 
    }); 
});

如果您使用HTML5，你可以在<tr>元素直接设置data属性（docs）：

<tr style="background-color: #abc123;" data-originalBg="#abc123"> ... </tr>

这样，你可以简单地逃脱：

$(document).ready(function() { 
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
     $(this).css("background-color", "Lightgrey"); 
    }, function() { 
     $(this).css("background-color", $this.data('originalBg')); // Already set via the data-originalBg attribute of the `tr` 
    }); 
});

来源

2011-10-05 08:19:10 jensgram

惊人的它就像一个魅力！你可以向我解释什么是原创？它是一个属性还是一个变量？ – CiccioMiami

HTML5示例非常好，我会提出这个建议。对于目前不支持HTML5的broswers，您可以包含html5shiv脚本http://code.google.com/p/html5shiv/ –

@CiccioMiami'originalBg'只是用来保存原始背景颜色的关键字（ '$ this.data（'originalBg'，$ this。css（'background-color'））'在关键'originalBg'下保存'background-color'的CSS值）。我用它来检索原始值（'$ this.css（“background-color”，$ this.data（'originalBg'））;''将背景颜色的CSS值设置为最初存储的值。（这是否有道理？） – jensgram

你试过

var color = ''; 
$(document).ready(function() { 
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(
     function() { 
      color = $(this).css("background-color"); 
      $(this).css("background-color", "Lightgrey"); 
     }, 
     function() { 
      $(this).css("background-color", color); 
     }); 
    }); 
});

这样的varaible是全球性的，从而会记得值。

来源

2011-10-05 08:18:17

感谢您的回答，但它不起作用 – CiccioMiami

如果你的高亮颜色是静态的（这似乎是），那么另一种方法是创建一个类调用类似：

.highlight { 
    background-color: #efefef !important; 
}

，然后简单地说：

$("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
    $(this).addClass("highlight"); 
}, function() { 
    $(this).removeClass("highlight"); 
});

然后你可以免费获得原始背景颜色（在chrome 24.0.1312.57 m和win 18的FF 18.0.2上测试）。

Toby

来源

2013-02-16 23:50:42

这真棒谢谢。 –

在jQuery中悬停表格行时存储背景颜色

回答

相关问题