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

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

html

HTML同时更改悬停时的表格单元格背景和文本字体颜色,html,Html,新手：我目前正在一个1和1网站上工作。我想在一个主页上的所有链接到不同的子页不同的框。每个框包括图像和图像下方的类别文本。由于边框的原因，我使用表中的表来创建框。我还添加了一个悬停效果，所以当你把鼠标放在任何一个盒子/桌子上时，背景会改变颜色。我想做的是让文本在改变颜色的同时改变颜色。我应该指出，我对CSS一无所知，对HTML知之甚少，所以一个实用的例子会让我大开眼界！提前谢谢。以下是我到目前为止拼凑的内容： <table border="0" cellpadding="10" cells

新手：我目前正在一个1和1网站上工作。我想在一个主页上的所有链接到不同的子页不同的框。每个框包括图像和图像下方的类别文本。由于边框的原因，我使用表中的表来创建框。我还添加了一个悬停效果，所以当你把鼠标放在任何一个盒子/桌子上时，背景会改变颜色。我想做的是让文本在改变颜色的同时改变颜色。我应该指出，我对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分开，您在表标记上使用的某些属性已被弃用，请查看此处

td:hover{背景：F00；颜色：0f0；} 第1单元第2单元

这是样品。这是从这条线取的并修改：

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

希望有帮助。

当前代码的主要问题是，单元格包含各种具有自己文本内容颜色的元素：链接和设置了颜色属性的span元素。直接在单元格上设置文字颜色或在封闭表上设置文字颜色无法覆盖此类内容

代码可能应该被重构重写，但这里有一个最小的更改来修复这个特定的问题。我已经删除了onmouseover和onmouseout属性，因为只使用：hover伪类进行设置更容易、更健壮。这里的要点是为td元素的所有子元素设置文本颜色，其中的所有元素，并且由于颜色是使用内联样式在span上设置的，因此style=。。。属性，一个！需要重要的说明符来覆盖它

表td：悬停{ 背景：89A6A1； } 表td：悬停*{ 颜色：黑色！重要； }

类别

复制了你的代码片段，可以看到它在工作，但不知道在我的代码中放置悬停位的位置-无论我放在哪里，它都会在网页上显示为实际文本！在同一文件夹中创建一个文件，并将其命名为style.css。将td:hover{background:F00；color:0f0；}放在该文件中。在html文档的开始标记和结束标记之间，您现在已将样式表链接到html文档。我使用的网站是一个1和1网站包，允许您使用拖放元素（即文本框、图像框、表、列等）创建内容，而不必了解html，但是当你说在同一个文件夹中创建一个文件并称之为style.css时，我就不知所措了。我的网站上没有文件夹。我可以上传图片，所以我会对style.css做同样的事情吗？你的网站上确实有文件夹。最好去1&1支持中心询问他们，因为我从未使用过他们。作为最后一个选择，我不推荐，你可以将它添加到每一个td-like悬停游戏中，直到几个小时的练习后没有乐趣为止！谢谢你的帮助。将尝试并学习css，并正确地使用它，以避免将来的繁琐更改。由于缺乏知识，这是一场艰苦的斗争！复制了你的整个代码以查看它的外观，当我查看网页时，没有任何颜色变化。我对CSS一窍不通，虽然我确实有了创建一些代码然后引用这些代码的概念，这样你就不必一直这么做了，但恐怕就是这样！你是怎么复制代码的？将所有代码复制到名为Sample.html的文件中，然后使用浏览器打开Sample.html，并将鼠标悬停在第一个表中的单元格上。当您将鼠标移到第一个表格中的单元格上时，其背景变为红色，字体颜色变为蓝色。它工作得非常好。按照说明将代码复制到文件中。打开Sample.html，是的，它工作得非常好。把它放在网站上，没有悬停的颜色变化。必须是1和1网站包。将不得不重访，我已经尝试了很多方法。我现在就放弃！谢谢你的帮助，真是太棒了。你能告诉我以table td:hover开头的代码放在哪里吗？它只是被放在正确的位置吗

其他代码的开头？@JLO，您可以将其放在页面头部的和标记之间，例如，标题元素的后面。让我解释一下。我将网站包附带的表元素拖放到网页上。然后我得到了一张空白的基本表格供初学者使用。我点击了html按钮，它让你“躲在”表格后面&去掉了html，所以我留下了一个空白框来放我自己的代码。框中没有“标题”或“标题”-没有。我把代码粘贴到盒子里。保存并关闭该框。就这样。您的示例在本论坛中非常有用，但当我在代码开头粘贴悬停位时，一切都出错了！很抱歉打扰您，我需要一个独立的解决方案。

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