如果在表格单元格中，CSS悬停更改其他文本/类的样式不起作用

Posted 2023-03-06

【中文标题】如果在表格单元格中，CSS悬停更改其他文本/类的样式不起作用

【英文标题】：CSS hover changing style of other text / class doesn't work if within a table cell

【发布时间】：2014-03-08 11:43:06

【问题描述】：

我有一些文本，我希望在将鼠标悬停在初始文本上时，同一页面中的某些其他文本位会改变字体颜色。

例如，使用下面的代码，当将鼠标悬停在“Hover over me”文本上时，我希望它将class="span2" 的两个跨度的字体颜色更改为红色。

令人讨厌的是，如果跨度在表格单元格内，它不想这样做：

<style type="text/css">
.span1:hover ~ .span2 
    color: red;

</style>

<span class="span1">Hover over me</span>
<br>
<span class="span2">This font colour changes as required.</span>
<br>
<table>
    <tr>
        <td>
            <span class="span2">This font colour doesn't change, why?</span>
        </td>
    </tr>
</table>

我尝试了向 td 和 CSS 代码添加类/ID 的各种组合，但没有任何运气，所以希望有人能提供解决方案！

注意：我不一定需要它在表格单元格的外部和内部工作，事实上，我只需要它在表格单元格内工作，但会有多次出现的文本分布在不同的表格中。

【参考方案1】：

这里的问题与~ 选择器有关。它只选择后续的兄弟姐妹，而不是兄弟姐妹的孩子。这就是为什么它适用于您的第一行，而不是嵌套在表格中的那一行。这是一个方便的css selectors 列表，我觉得很有帮助。

不幸的是，没有办法在不改变 html 布局方式的情况下纯粹使用 CSS 来解决这个问题。您可以尝试以下方法：

HTML：

<div class="wrapper">
 //all your existing html
</div>

CSS：

.wrapper:hover .span2 
    color: red;

或者您可以保留当前的 ​​html，并使用 jQuery 解决方案：

$(document).ready(function () 
  $('.span1').hover(
      function () 
          $('.span2').css('color', 'red');
      , function () 
          $('.span2').css('color', 'black');
      
   );
);

这是两者的working fiddle。

【讨论】：

似乎不起作用：<script src="jquery-1.11.0.min.js"></script> <script> $('.span3').hover( function () $('.span4').css('color', 'red'); , function () $('.span4').css('color', 'white'); ); </script> <div class="wrapper"> <span class="span3">Hover over me with JS</span> <br> <span class="span4">This font colour changes as required.</span> <br> <table> <tr> <td> <span class="span4">This font colour doesn't change</span> </td> </tr> </table> </div>

抱歉，我不完全确定如何在评论中正确显示代码。需要注意的是，我在与页面相同的目录下有“jquery-1.11.0.min.js”文件，上面的代码都在body标签内。我还添加了包装器 div CSS，尽管我认为无论如何都不应该在这种情况下使用它。

我怀疑我的页面没有正确安装 jQuery，因为上面的代码适用于 JSFiddle，但不适用于我的网页。我也尝试将脚本 src="... 移动到 head 标签中，但仍然没有运气。

我似乎无法正常工作，您能看看吗？我的链接没有任何变化：codjumper.com/hover.php

@user3294858，您的示例似乎缺少$(document).ready();。小提琴自动包含这个。请参阅我编辑的答案。

【参考方案2】：

我不认为 CSS 可以执行这种功能。

如果您不反对使用它，Jquery 绝对可以处理此功能。一个简单的 onhover 事件可以操纵你想要的 css。

【参考方案3】：

您的 span1 是否始终是您要在其中查找 span2 的表的兄弟？如果是这样，

.span1:hover ~ table tr td .span2 
    color: red;

http://jsfiddle.net/S5VAp/ 但是，如果 span1 是表中的另一个 td，或者如果您的表变得嵌套，则变得更加困难。在这种情况下，javascript 解决方案会更直接。

【讨论】：

span1（只出现一次）将在一个完全不同于 span2 的表中，恐怕！

实际上，事实证明您上面的代码有效 - 即使我在不​​同的表中有 span2 的重复项，所有出现的地方都会改变颜色。非常感谢！

但是如果你将 span1 放在一个表中（而不是表是 span1 的兄弟），我的代码将无法工作。 jsfiddle.net/S5VAp/1

啊，是的，我明白你的意思了。回到绘图板！

我认为@badAdviceGuy 的 jQuery 解决方案是我要走的路。

【参考方案4】：

出于同样的原因，如果您将 <span class="span2">This font colour changes as required.</span> 包装在 div 中（例如 <div><span class="span2">This font colour changes as required.</span></div>，即使第一个 .span2 也不会变红！因为它不符合您的 css 规则！

做这样的事情JSFiddle 会为你工作：

CSS（你的规则不变）：

.span1:hover .span2 
    color: red;

HTML（将所有.span2 包装在.span1 中）：

<span class="span1">Hover over me
    <br />
    <span class="span2">This font colour changes as required.</span>
    <br />
    <span>This should not be red</span>
    <table>
        <tr>
            <td>
                <span class="span2">This font colour doesn't change, why?</span>
            </td>
        </tr>
    </table>
</span>

【讨论】：

span 元素中不允许有表格。但是，你的基本前提是好的。如果 span1 是父级，那么事情就简单了。

当然，它不会验证（违反内联块），但它可以工作。只需将span 更改为div

【参考方案5】：

我遇到了表格行将正确突出显示但每个 td 标记内的字体颜色保持不变的问题。

问题：

tr:hover 
    background: #0585fd;
    color: #FFF;

修复：

tr:hover td 
    background: #0585fd;
    color: #FFF;

将 td 添加到 tr:hover 伪代码中，使 td 标签内的文本在整行悬停时变为白色。