Question

NEWBIE：我目前在1and1网站上工作。我希望主页上的不同框都链接到不同的子页面。每个方框都包含一个图像和＆＃34;类别＆＃34;图片下方的文字。由于边框，我在表格中使用表来创建框。我还添加了悬停效果，因此当您将鼠标悬停在任何这些框/表上时，背景会改变颜色。我想要做的是让文本在相同的时间改变颜色作为框改变颜色。我应该指出，我对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>

Answer 1

只使用颜色：绿色例如。你应该尝试将你的风格与你的html分开，不推荐使用你在桌面标签上使用的一些属性，看看这里w3Schools Table tag

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

代码应该可以重构（重写），但这是修复此特定问题的最小更改。我删除了onmouseover和onmouseout属性，因为使用:hover伪类进行设置更容易，更健壮。这里的要点是为td元素的所有后代（其中的所有元素）设置文本颜色，并且因为颜色在span上设置为内联样式，具有style=...属性，

!important

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

Answer 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 部分中，我们有一个样式可以应用于具有名为 styledTable td 元素>。 ：hover 部分表示当鼠标悬停在元素上时应该应用样式：

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

希望它有所帮助。

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

3 个答案: