Css 更改响应表的悬停颜色_Css_Colors_Html Table_Hover_Responsive

Css 更改响应表的悬停颜色

css colors

Css 更改响应表的悬停颜色,css,colors,html-table,hover,responsive,Css,Colors,Html Table,Hover,Responsive,我尝试了一个简单的技巧，改变一个响应表的悬停颜色，但失败了我尝试链接CSS，但失败了我需要添加更多的CSS标签来实现这一点吗你能帮我理解一下我的方法有什么问题吗这是我的密码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" h

我尝试了一个简单的技巧，改变一个响应表的悬停颜色，但失败了

我尝试链接CSS，但失败了

我需要添加更多的CSS标签来实现这一点吗

你能帮我理解一下我的方法有什么问题吗

这是我的密码：

    <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #FF0000;
}
  </script>
</head>
<body>

<div class="container">
  <h2>Table</h2>
  <p>The .table-hover class enables a hover state on table rows within a tbody:</p>

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>

  </table>
</div>

</body>
</html>


.table hover thead tr:hover th、.table hover t车身tr:hover td{
背景色：#FF0000；
}
桌子
.table hover类在tbody中的表行上启用悬停状态：
名字
姓氏
电子邮件
约翰
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com

您必须在CSS上使用样式而不是脚本

在这里，我想：

<style>
.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #FF0000;
}
</style>


.table hover thead tr:hover th、.table hover t车身tr:hover td{
背景色：#FF0000；
}

`
.table hover thead tr:hover th、.table hover t车身tr:hover td{
背景色：#FF0000；
}
`

此代码使高亮显示在表头上，而此代码仅使高亮显示在表体上

`<style>
 .table-hover tbody tr:hover td {
  background-color: #FF0000;
 }
 </style>`

`
.桌面悬停t车身tr：悬停t车身{
背景色：#FF0000；
}
`

meThanks Jayson的情况很好。你能确认你在悬停时能看到红色还是灰色吗。事实上，我想要一个红色的悬停，但我可以看到灰色是的，这是一个愚蠢的错误，所需的代码放在脚本中，而不是样式，这是有效的css。

`<style>
 .table-hover tbody tr:hover td {
  background-color: #FF0000;
 }
 </style>`