CSS和jQuery-如何强制2条规则协同工作

debugcn 发表于 Dev

弗拉基米尔

我有一个html表。我需要2条规则才能工作：

将鼠标悬停在表格上时，行应更改背景色。
1列中的单元格应根据单元格内容而具有不同的颜色，例如-如果cell =“ Green”中的值，背景应为绿色。

对于第一个规则，我确实在css中进行了规则：

tr:hover
{
    background: brown;
}

第二个-我附加了jQuery 2.0.3并添加了js函数，可为td创建类“ color”：

$(document).ready(function(){

    $('td.color').each(function(){  
    var x = $(this).text().trim();
    if ( x === "Green" ) $(this).css({background: 'green'});
    else if (x === "Yellow") $(this).css({background: 'yellow'}) ;
    else if (x === "Red") $(this).css({background: 'red'}) ;
    });

 });

表的html是：

<table>
    <tr  class='tr'>
        <td class='td'>Name1</td>
        <td class='td'>Green</td>
        <td class='color'>Green</td>
    </tr>
     <tr  class='tr'> 
         <td class='td'>Name2</td>
         <td class='td'>Yellow</td>
         <td class='color'>Yellow</td>
    </tr>
    <tr class='tr'>
        <td class='td'>Name3</td>
        <td class='td'>Red</td>
        <td class='color'>Red</td>
    </tr>
</table>

（仅将颜色分配给最后一列）

您可以在这里看到带有结果的示例：http : //jsfiddle.net/bM5aW/7/

因此，最后一列中的背景根据文本值着色，并且表行会在鼠标悬停事件上更改背景色。但据我所知，最后一栏不会将鼠标移到颜色上，因为js脚本中的“ td ”规则会覆盖css中的“ tr ”规则。如果还声明了“ td”规则，如何强制“ tr”规则起作用？

阿伦·P·约翰尼（Arun P Johny）

在规则中添加！important

tr:hover, tr:hover td {
    background: brown !important;
}

演示：小提琴

问题是您将内联样式应用于最后一个td元素，该tr样式优先于该元素的样式。

另一种选择是使用类选择器来应用颜色

$(document).ready(function () {
    $('td.color').addClass(function(){
        return $.trim($(this).text()).toLowerCase()
    })
});

然后

tr:hover, tr:hover td {
    background: brown;
}
td.green {
    background: green;
}
td.yellow {
    background: yellow;
}
td.red {
    background: red;
}

演示：小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。