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的更改不会反映其子节点，在这种情况下为<a>。

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

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

以下是我尝试的不同方法：

1＆GT;

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

这里的问题是它会将所有元素都放在.textTable中，这很明显。

2 - ;

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

这完全是愚蠢的。

我知道有一个复杂的代码来解决这个问题，但有没有任何解决方案非常简单，以便即使是子节点也可以反映其父节点的变化？

类似

 $(".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，这样你可以（或多或少）

Answer 2

您没有将该类添加到表中。预览：http://jsfiddle.net/msbodetti/YvbVn/

这个

<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>

应该是

<table class="textTable">
  <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>

Answer 3

仅为td a添加CSS样式是否足够：hover too

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

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

.textTable td a:hover {
  color:white;

}

对td所做的更改未反映在<a> its child node</a>上

3 个答案: