Question

<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都会受到相应的影响。

提前致谢

Answer 1

我认为你根本不需要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中执行颜色声明 - 通常更容易维护。

Answer 2

我会执行以下操作:(我假设这些<td>位于<table>元素内），因此您可以将类“table_class”添加到表中并在 css中定义两个类：

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

注意：使用此解决方案完全不需要JQuery;）

Answer 3

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

Answer 4

是否可以将鼠标悬停在整行上。或者修改此代码仅执行td

$("#mytable tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});

Answer 5

在你的CSS中，为

创建一个类

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

然后在jQuery中

   $("td").hover(
      function () {
        $(this).addClass("hoverstate");
      },
      function () {
        $(this).removeClass("hoverstate");
      }
    );

Answer 6

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

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

然后当您尝试在选择器中使用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');

希望这有帮助！

Jquery改变背景

6 个答案: