基本上，当我将鼠标悬停在表格中的一行上时，我希望该行的背景颜色更改为“黑色”，而我将鼠标悬停在特定单元格或 td 上以更改为“红色”。
即在悬停时会发生两个事件。我知道如何为其中之一做这件事，但不是两者兼而有之。
这可能使用jquery吗？
感谢每个人的贡献，我已经为你们所有了。
问问题
14390 次
7 回答
3
简单的 CSS 就足够了：
tr:hover{
background-color:red
}
td:hover{
background-color:blue
}
于 2013-07-29T16:11:20.137 回答
3
$('td').hover( function() {
$(this).parent().children().css("background-color", "black");
$(this).css("background-color", "red")
});
$('tr').mouseleave( function() {
$(this).children('td').css("background-color", "white");// or whatever
});
于 2013-07-29T16:12:59.153 回答
2
将一些类添加到您想要红色的 td（让我们称该类为“rdClass”）和行“blkClass”：
<table>
<tr class='rdClass'>
<td>
1
</td>
<td class='blkClass'>
2
</td>
<td>
3
</td>
</tr>
</table>
$(document).ready(function ()
{
$(".rdClass").mouseover(function ()
{
$(this).css("background-color", "red");
});
$(".blkClass").mouseover(function ()
{
$(this).css("background-color", "black");
});
});
于 2013-07-29T16:08:34.750 回答
2
为添加和删除类的所有行和 td 添加悬停侦听器，然后使用 CSS 为行和单元格设置不同的样式。
jQuery
$('tr, td').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
CSS
tr.highlight {
background-color: red;
}
td.highlight {
background-color: black;
}
于 2013-07-29T16:10:26.887 回答
1
如果行和单元格都在同一个容器中，您可以将鼠标悬停事件附加到该容器并修改处理程序中的子项。
于 2013-07-29T16:08:02.160 回答
1
$("td").hover(function(){
$(this).css("background-color", "red");
$(this).parrent('tr').css("background-color", "black");
});
于 2013-07-29T16:11:11.797 回答
1
$(function() {
$(".tablecell").on('mouseover', function(event) {
$(".tablerow td").removeClass('hoveColBgColor hoveRowBgColor');
$(this).parent('tr.tablerow').children('td:gt(0)').addClass('hoveRowBgColor');
$('.tablerow > td:nth-child('+($(this).index()+1)+')').addClass('hoveRowBgColor');
});
$(".tablerow").on('mouseout', function(event) {
$(".tablerow").children('td:gt(0)').removeClass('hoveRowBgColor');
$(".tablerow td").removeClass('hoveColBgColor hoveRowBgColor');
});
});.hoveRowBgColor{
background-color:#ccc;
}
.hoveColBgColor{
background-color:#666;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="table1" width="100%" cellspacing="1" cellpadding="0" bordercolor="" border="0">
<tbody>
<tr class="tablerow">
<td class="whiteZone"> </td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
<td class="whiteZone">head</td>
</tr>
<tr class="tablerow">
<td class="menuZone">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
<tr class="tablerow">
<td class="menuZone" style="width:130px;word-wrap: anywhere;">head</td>
<td class="whiteZone tablecell" id="tablecell_1" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_13" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_4" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_3" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_2" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_12" align="center">test</td>
<td class="whiteZone tablecell" id="tablecell_18" align="center">test</td>
</tr>
</tbody>
</table>于 2019-07-25T13:02:06.997 回答