HTML 在同一时间悬停时更改表格单元格背景和文本字体颜色答案

【问题标题】：HTML change table cell background AND text font colour on hover AT THE SAME TIMEHTML 在同一时间悬停时更改表格单元格背景和文本字体颜色
【发布时间】：2014-12-30 13:21:30
【问题描述】：

NEWBIE：我目前正在开发一个 1and1 网站。我希望主页上的不同框都链接到不同的子页面。每个框都包含一个图像和图像下方的“类别”文本。由于边框的原因，我使用表格中的表格来创建框。我还添加了悬停效果，因此当您将鼠标悬停在任何这些框/表格上时，背景会改变颜色。我想做的是让文本在改变颜色的同时改变颜色。我应该指出，我对 CSS 一无所知，对 HTML 知之甚少，所以一个可行的例子会让我很开心！提前致谢。到目前为止，这是我拼凑起来的：

<table border="0" cellpadding="10" cellspacing="10" style="width: 685px;">
    <tbody>
        <tr>
            <td>
            <table bgcolor="#F7F7F3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'; this.style.color='black'" style="width: 100%; color: black;">
                <tbody>
                    <tr>
                        <td>
                        <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>

                        <p>&nbsp;</p>

                        <p><strong><span style="color:#89A6A1;">Category</span></strong></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'" style="width: 100%;">
                <tbody>
                    <tr>
                        <td>
                        <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>

                        <p>&nbsp;</p>

                        <p><strong><span style="color:#89A6A1;">Category</span></strong></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" onmouseout="this.bgColor='#f7f7f3'" onmouseover="this.bgColor='#89A6A1'" style="width: 100%;">
                <tbody>
                    <tr>
                        <td>
                        <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>

                        <p>&nbsp;</p>

                        <p><strong><span style="color:#89A6A1;">Category</span></strong></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： html

【解决方案1】：

例如，只需使用颜色：绿色。您应该尝试将您的样式与您的 html 分开，您在表格标签上使用的一些属性已被弃用，请看这里w3Schools Table tag

td:hover{background:#F00;color:#0f0;}

<table>
  <tr>
    <td>cell 1</td>
    <td> cell 2</td>
   </tr>
  </table>

【讨论】：

复制了您的 sn-p 并且可以看到它工作，但不知道在我的代码中放置悬停位的位置 - 无论我放在哪里，它都会作为网页上的实际文本出现！跨度>
在同一文件夹中创建一个文件并将其命名为 style.css。将td:hover{background:#F00;color:#0f0;} 放入该文件中。在您的 html 文档的开始和结束标记之间放置 <link rel="stylesheet" href="style.css" type="text/css" />，您现在已经将样式表链接到您的 html 文档。
我正在使用的网站是一个 1and1 网站包，它使您能够使用拖放元素（即文本框、图像框、表格、列等）创建内容，而无需了解 html，但是当你说“在同一个文件夹中创建一个文件并将其命名为 style.css”时，我迷路了。我的网站上没有文件夹。我可以上传图片，那么我会为 style.css 做同样的事情吗？
您的网站上确实有文件夹。最好去 1&1 支持并询问他们，因为我从未使用过它们。作为最后一个选项，我不推荐，您可以将其内联添加到每个 td 中，例如 <td onmouseover="this.style.color='red';this.style.background='green'" onmouseout="this.style.color='';this.style.background=''">Hover me</td>
经过几个小时的练习仍然没有乐趣！感谢帮助。将尝试学习 css 并正确执行以节省将来繁琐的更改。知识很少，这是一场艰苦的斗争！

【解决方案2】：

当前代码的主要问题是单元格包含具有自己的文本（内容）颜色的各种元素：链接和span 元素，并在它们上设置了color 属性。在单元格上设置文本颜色（直接或通过在封闭表上设置）不能覆盖此类内容。

代码可能应该被重构（重写），但这里有一个最小的改变来解决这个特定的问题。我删除了onmouseover 和onmouseout 属性，因为只使用:hover 伪类来设置东西更容易、更健壮。这里的重点是为 td 元素（其中的所有元素）的所有后代设置文本颜色，并且由于使用内联样式在 span 上设置了颜色，并且具有 style=... 属性，因此需要 !important 说明符覆盖它。

table table td:hover {
  background: #89A6A1;
}
table table td:hover * {
  color: black !important;
}

<table border="0" cellpadding="10" cellspacing="10" style="width: 685px;">
    <tbody>
        <tr>
            <td>
            <table bgcolor="#F7F7F3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" style="width: 100%; color: black;">
                <tbody>
                    <tr>
                        <td>
                        <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>

                        <p>&nbsp;</p>

                        <p><strong><span style="color:#89A6A1;">Category</span></strong></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" style="width: 100%;">
                <tbody>
                    <tr>
                        <td>
                        <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>

                        <p>&nbsp;</p>

                        <p><strong><span style="color:#89A6A1;">Category</span></strong></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td>
            <table bgcolor="#f7f7f3" border="1" bordercolor="#89A6A1" cellpadding="3" cellspacing="3" style="width: 100%;">
                <tbody>
                    <tr>
                        <td>
                        <p><a href=""><img a="" alt="Awaiting Image" src="" style="width: 100%; max-width: 219px; height:auto; horizontal-align: center;" /></a></p>

                        <p>&nbsp;</p>

                        <p><strong><span style="color:#89A6A1;">Category</span></strong></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

【讨论】：

太棒了 Jukka。你能告诉我我把以 table table td: hover 开头的代码放在哪里吗？它只是放在其他代码的开头吗？
@JLO，您可以将它放在页面的head 部分中的<style> 和</style> 标记之间，例如在title 元素之后。
让我解释一下。我将网站包附带的表格元素拖放到网页上。然后我得到一个空白的初学者基本表。我点击了 html 按钮，它让你“躲在”表格后面并去掉了 html，所以我留下了一个空白框来放入我自己的代码。框中没有“head”或“title”——什么都没有。我将代码粘贴到框中。保存并关闭盒子。就是这样。您的示例在此论坛中效果很好，但是当我在代码开头粘贴悬停位时，一切都出错了！很抱歉给您带来了困扰，但我需要在包装盒内提供一个独立的解决方案。

【解决方案3】：

这里是示例。这是取自这个线程 Changing the color of a cell in a html table when I hover over it 并修改：

<!DOCTYPE html>
<html>

<style type="text/css">
.styledTable td:hover {
  background-color: #ff0000;
  color: blue;
}
</style>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="wrap">
<table class="styledTable" border=1>
  <tbody>
    <!-- Results table headers -->
    <tr>
      <th>Messages Per Month</th>
      <th>1 Month Pricing</th>
      <th>3 Month Pricing</th>
      <th>12 Month Pricing</th>
    </tr>
    <tr>
      <td>500</td>
      <td>$14.95/Month</td>
      <td>$12.95/Month</td>
      <td>$9.95/Month</td>
    </tr>
    <tr>
      <td>1,000</td>
      <td>$24.95/Month</td>
      <td>$20.95/Month</td>
      <td>$17.95/Month</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<hr/>
<table border=1>
  <tbody>
    <!-- Results table headers -->
    <tr>
      <th>Messages Per Month</th>
      <th>1 Month Pricing</th>
      <th>3 Month Pricing</th>
      <th>12 Month Pricing</th>
    </tr>
    <tr>
      <td>500</td>
      <td>$14.95/Month</td>
      <td>$12.95/Month</td>
      <td>$9.95/Month</td>
    </tr>
    <tr>
      <td>1,000</td>
      <td>$24.95/Month</td>
      <td>$20.95/Month</td>
      <td>$17.95/Month</td>
    </tr>
    <tr>
      <td>1,500</td>
      <td>$37.95/Month</td>
      <td>$31.95/Month</td>
      <td>$26.95/Month</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

这里有两张桌子。一个应用了样式，另一个没有样式。这两个表之间的主要区别在于第一个表中的 class=styledTable 属性。然后，在 HTML 的 css 部分，我们有一个样式可以应用于表中的所有 td 元素，这些元素有一个名为 styledTable的类>。 :hover 部分表示当鼠标悬停在元素上时应该应用样式：

.styledTable td:hover{
  background-color: #ff0000;
  color: blue;
}

希望对你有帮助。

【讨论】：

复制了您的整个代码以查看它的外观，当我查看网页时，颜色没有任何变化。我对 CSS 一无所知，尽管我确实知道创建一些代码然后引用该代码的概念，因此您不必继续这样做，但恐怕就是这样！
你是如何复制代码的？将所有代码复制到名为 Sample.html 的文件中，然后使用浏览器打开 Sample.html 并将鼠标悬停在第一个表格中的单元格上。当您将鼠标移到第一个表格中的一个单元格上时，它的背景变为红色，字体颜色变为蓝色。它工作得很好。
按照说明将代码复制到文件中。打开 Sample.html，是的，它工作得非常好。把它放在网站上，没有悬停颜色变化。必须是 1and1 网站包。一定要重温，我已经尝试了很多方法。会暂时放弃！不过感谢您的帮助。