当鼠标悬停在表格行上时,我正在尝试突出显示(更改背景颜色)整行.我在网上搜索它应该有效,但事实并非如此.我在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>
Run Code Online (Sandbox Code Playgroud)
我的css:
.list1 tr:hover{
background-color:#fefefe;
}
Run Code Online (Sandbox Code Playgroud)
正确的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;
}
Run Code Online (Sandbox Code Playgroud)
谢谢你们的反馈!
小智 124
你最好的选择是使用
table.YourClass tr:hover td {
background-color: #FEFEFE;
}
Run Code Online (Sandbox Code Playgroud)
行不完全支持背景颜色,但是单元格使用以下组合:hover和子元素将产生您需要的结果.
tr:hover
在旧浏览器中不起作用。
您可以使用 jQuery 来实现此目的:
.tr-hover
{
background-color:#fefefe;
}
Run Code Online (Sandbox Code Playgroud)
$('.list1 tr').hover(function()
{
$(this).addClass('tr-hover');
},function()
{
$(this).removeClass('tr-hover');
});
Run Code Online (Sandbox Code Playgroud)