尝试使用 JQuery 突出显示表行但不起作用，谁能告诉我为什么以及如何修复它？
表格:
<table id="customers">
<caption>Customers</caption>
<thead>
<tr>
<th>Customer no</th>
<th>Last name</th>
<th>First name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr class="alt">
<td>1</td>
<td>Jackson</td>
<td>Simon</td>
<td>
<div class="align-left">
<input type="submit" name="View" id="view" value="View" />
</div>
<div class="align-right">
<input type="submit" name="Rent" id="rent" value="Wants to rent" />
</div>
</td>
</tr>
<tr class="alt">
<td>1</td>
<td>Miller</td>
<td>Darren</td>
<td>
<div class="align-left">
<input type="submit" name="View" id="view" value="View" />
</div>
<div class="align-right">
<input type="submit" name="Rent" id="rent" value="Wants to rent" />
</div>
</td>
</tr>
</tbody>
</table>
JQuery:
$("#customers tbody tr").hover(
function () {
$(this).css({
background: 'yellow'
});
},
function () {
$(this).css("background", "");
});
当悬停在表格行上时，表格行不会突出显示，另请注意，当我调整选择器时它适用于 td，只是不适用于 tr 行。
CSS:
...
/* table data style */
table {
border-collapse: collapse;
width: 400px;
color: grey;
font-family: sans-serif;
}
th, td {
border-bottom: 1px solid brown;
padding: 5px;
background-color: seashell;
text-align: left;
}
th {
width: 200px;
}
td {
width: 200px;
}
tr.alt td, tr.alt th {
background-color: white;
}
tr:last-child td, tr:last-child th {
border-bottom: 0;
}
caption {
font-weight: bold;
padding-bottom: 5px;
}
.main-font {
font-family: sans-serif;
}
最佳答案
我将添加到 sbeliv01 的正确答案中，即不需要 Javascript，它可以用纯 CSS 实现，我强烈建议您将它用于此类事情:
#customers tbody tr:hover
{
background: yellow;
}
在 OP 发布完整的 CSS 代码后进行编辑:
是的，您的 CSS 正在“阻止”悬停效果，因为您在 td 元素上应用了 background-color。所以你的 tr 背景颜色被正确地更改为 yellow，但是你看不到它，因为你的 td 仍然是 seashell/白色。
要解决您的问题，请将背景色应用于 CSS 中的 tr 而不是 td:
table {
border-collapse: collapse;
width: 400px;
color: grey;
font-family: sans-serif;
}
th, td {
/* Remove background-color here */
border-bottom: 1px solid brown;
padding: 5px;
text-align: left;
}
/* Add this declaration (with the color previously applied to "th, td") */
tr
{
background-color: seashell;
}
th {
width: 200px;
}
td {
width: 200px;
}
/* Change your selector from "tr.alt td, tr.alt th" to this */
tr.alt {
background-color: white;
}
tr:last-child td, tr:last-child th {
border-bottom: 0;
}
caption {
font-weight: bold;
padding-bottom: 5px;
}
.main-font {
font-family: sans-serif;
}
关于javascript - 尝试使用 JQuery 突出显示表行但不起作用，谁能告诉我为什么以及如何修复它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14739302/