Question

我有以下代码：

<tr><td class="style3">test</td></tr>

和

$("tr").hover(
  function () {
    $(this).css("background-color","#d9e8cd");
    $(this).css("font-weight","bold");
    $(this).children().css("color","#222222 !important");
  }, 
  function () {
    $(this).css("background-color","");
    $(this).css("font-weight","");
    $(this).children().css("color","#4b4a4a");
  }
);

问题是文本颜色不会改变，我尝试指定tr但它不会工作所以我认为定位td会使它工作因为style3类指定了颜色。

如何在tr悬停在上面时使文本的颜色发生变化？

这是一个在线演示 http://jsfiddle.net/B7dMd/

Answer 1

jQuery CSS不支持重要的语法。如果你真的需要添加“！important”，你可能想尝试CSS DOM cssText：

$(this).children().css('cssText', 'color:#222222 !important');

要指出它 - 在大多数情况下，你没有理由在内联样式中添加！important，因为内联样式具有高优先级，你只需要覆盖另一个！重要规则。

Answer 2

当您添加tr不在table内时，浏览器会在没有表格标签（td和tr）的情况下对其进行解释，并且只允许文本。如果检查元素here，则可以看到此行为。

要解决此问题，请将其添加到表格中。

<table>
    <tr>
        <td class="style3">test</td>
    </tr>
<table>

demo

$（this）.children（）不工作

2 个答案: