Tr:悬停不工作

当鼠标悬停在表行上时，我试图突出显示(更改背景颜色)整个行。我在网上搜索了一下，应该可以用的，但是不行。我在Chrome上显示它

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

我的css:

.list1 tr:hover{
background-color:#fefefe;
}

正确的css应该是:

.list1 tr:hover td{
background-color:#fefefe;
}
//--this css for the td keeps overriding the one i showed earlier
.list1 td{
background-color:#ccc000;
}

感谢大家的反馈!

你最好使用

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

行不完全支持背景色，但单元格支持，使用:hover和子元素的组合将产生您需要的结果

您需要使用<!DOCTYPE html> for:hover与<a>标记以外的任何东西一起工作。试着把它添加到HTML的顶部。

try

.list1 tr:hover td{
    background-color:#fefefe;
}

tr:hover在旧的浏览器中不工作

你可以使用jQuery:

.tr-hover
{  
  background-color:#fefefe;
}

$('.list1 tr').hover(function()
{
    $(this).addClass('tr-hover');
},function()
{
    $(this).removeClass('tr-hover');
});

您可以简单地使用background CSS属性如下:

tr:hover{
    background: #F1F1F2;    
}

工作示例

试一试:

css代码:

.list1 tr:hover td {
    background-color:#fefefe;
}

最近我有一个类似的问题，问题是我正在使用background-color，使用background: {anyColor}

的例子:

tr::hover td {background: red;}

这个很有魅力!

对我来说很好…tr:hover应该可以工作。可能它不会工作，因为:

您设置的背景色非常浅。你不会碰巧在白色背景上使用这个吧?
你的<td>标签没有正确关闭

请注意，将<tr>悬停在旧版本的浏览器中是不工作的。

使用!important:

.list1 tr:hover{
    background:#fefefe !important;
}

就像@wesley说的，你还没有关闭你的第一个<td>。你打开了两次。

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

CSS:

.list1 tr:hover{
    background-color:#fefefe;
}

不需要JavaScript，只要完成你的HTML代码

我也遇到了同样的问题。我发现，如果我使用DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

它没有工作。但是如果我使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

也试试这个tr:hover td {color: aqua;}'

另外，CSS文件中标签的样式顺序也很重要。确保tr:n -child和tr:hover td在表的td和th之前被描述。像这样:

#tblServers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#tblServers tr:nth-child(even){background-color: #f2f2f2;}
#tblServers tr:hover td{background-color: #c1c4c8;}
#tblServers td, #tblServers th {
  border: 1px solid #ddd;
  padding: 8px;
}
#tblServers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4a536e;
  color: white;
}

相关内容

最新更新

热门标签：