css - 对 td 所做的更改不会反射(reflect)在 其子节点上

Question

我有这张表:

<table>
  <tr>
    <td><a href="">Choultry</a></td>
    <td><a href="" >Vegetable verndors</td>
  </tr>
  <tr>
    <td><a href="" >Decorators</td>
    <td><a href="" >Handicrafts</td>
  </tr>
</table>

并且每个 td 的背景色都是白色和 font-color:rgb(121,0,0) .因此，当我将鼠标悬停在每个 td 上时，我希望背景颜色更改为 rgb(121,0,0) 并将字体颜色更改为白色。所以只要我不包括 <a> 就可以正常工作元素即超链接元素。默认情况下，超链接元素为蓝色，因此我将其指定为 rgb(121,0,0)。当我将鼠标悬停在 td 上并执行我通常的颜色反转时，即背景颜色:rgb(121,0,0) 和 color:white只有背景颜色会改变，而字体颜色不会改变它仍然是 rgb(121,0,0) 使其不可见。这意味着对 td 的更改不反射(reflect)其子节点，即 <a>在这种情况下。

.textTable td a
{
    color:rgb(121,0,0);
}

.textTable td:hover
{   
    background-color:rgb(121,0,0);
    color:white;
}

以下是我尝试过的不同方法:

1>

$(".textTable td").mouseenter(function(){$(".textTable td a").css("color","white");});
$(".textTable td").mouseleave(function(){$(".textTable td a").css("color","rgb(121,0,0)");});

这里的问题是它会使 .textTable 中的所有元素都变成 td，这是很明显的。

2>

.textTable td:hover
{   
    .textTable td a
    {
         color:white;
    }
    background-color:rgb(121,0,0);
    color:white;
}

这完全是愚蠢的。

我知道有一个复杂的代码来解决这个问题，但是有没有非常简单的解决方案，即使是子节点也能反射(reflect)出其父节点的变化？

有点像

 $(".textTable td").mouseenter(function(){$(".textTable td a").css("color","white");});
    $(".textTable td").mouseleave(function(){$(this).childNodes[0].css("color","rgb(121,0,0)");});

Answer 1

您可以直接选择悬停元素的后代，如下所示:

.textTable td,
.textTable td a {
    color:rgb(121,0,0);
}

.textTable td:hover,
.textTable td:hover a {
    background-color:rgb(121,0,0);
        color:white;
}

你不需要javascript。但是，如果您喜欢第二个示例中的嵌套规则的外观，您可以考虑使用 SASS 或 Less，它允许您(或多或少)这样做