-2 
<td class="td_1">nbsp;</td><td class="td_1">nbsp;</td><td class="td_1">nbsp;</td>
<td class="td_2">nbsp;</td><td class="td_2">nbsp;</td><td class="td_2">nbsp;</td>
<td class="td_3">nbsp;</td><td class="td_3">nbsp;</td><td class="td_3">nbsp;</td>
<td class="td_4">nbsp;</td><td class="td_4">nbsp;</td><td class="td_4">nbsp;</td>

我需要一个 jquery 在鼠标悬停时将背景更改为 #00000，鼠标悬停时更改为原始颜色。这些是在循环中动态生成的，因此它可以达到 td_100s。

我尝试了一些示例，但不幸的是，这些名称都是静态的，对我不起作用。

如果将鼠标悬停在 td_1 上，则所有 td_1 都应受到相应影响。

提前致谢

4

6 回答 6

4

我认为鼠标悬停效果根本不需要 jQuery。CSS 可以完成这项工作：

#table_id td {
  background: #ffffff;
 }

#table_id td:hover {
  background: #000000;
  color: #ffffff;
}

这假定您的表有一个 ID 或 CSS 的其他钩子。

大量更新以响应其他单元格的要求

好的，如果您希望所有具有相同类的 td 更改颜色，那么是的，您将需要一些 javascript。

像这样的东西应该工作：

$('td').hover(function(){
    var thisClass = $(this).attr('class');
    $('td.' + thisClass).addClass('hovered');
}, 
   function(){
     var thisClass = $(this).attr('class');
     $('td.' + thisClass).removeClass('hovered');
 }

然后在 CSS 中：

.hovered { background: #000000; }

我通常尝试使用 jQuery 添加/删除类，而不是在 CSS 中进行颜色声明 - 通常更容易维护这种方式。

于 2012-04-13T13:25:02.437 回答
2

我会做以下事情：（我假设这些<td>s在一个<table>元素内）所以你可以将类“table_class”添加到表中并在css中定义两个类：

table.table_class td{
    background-color:#whatever;
}
table.table_class td:hover{
    background-color:#000;
}

注意：这个解决方案根本不需要 JQuery ;)

于 2012-04-13T13:24:35.460 回答
0

是否可以对整行进行悬停。或者修改此代码td只做

$("#mytable tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});
于 2012-04-13T13:23:13.727 回答
0

为什么要设置动态 td 行的类名？？？为什么不将他们的 ids 设置为 'td_1' ... 'td_100'？并在鼠标悬停时改变他们的班级？或者css3过滤器怎么样？

于 2012-04-13T13:21:36.810 回答
0

在你的 CSS 中，为

td.hoverstate{background-color:#000;}

然后在jQuery中做

   $("td").hover(
      function () {
        $(this).addClass("hoverstate");
      },
      function () {
        $(this).removeClass("hoverstate");
      }
    );
于 2012-04-13T13:24:36.943 回答
0

好吧，看看这个：http: //jsfiddle.net/hKmTU/3/。我已经按照你要求的方式工作了。chipcullen 的答案不起作用，因为您需要解析悬停类。

例如：当您将鼠标悬停在所有 td_1 上时，该类变为“td_1 hovered”。

然后，当您尝试在选择器中使用 thisClass 时，您最终会得到“td.td_1 hovered”，这不会选择正确的 div

var thisClass = $(this).attr('class');
$('td.' + thisClass).removeClass('hovered');

becomes

var thisClass = $(this).attr('class');
thisClass = thisClass.substring(0, thisClass.indexOf(" "));
$("td." + thisClass ).removeClass('hovered');

希望这可以帮助！

于 2012-04-13T18:20:30.997 回答