我在下面有一个简单的 html 代码以及几行 css 来突出显示表格行
HTML
<table style="empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
</tr>
<tr>
<td class="center">
<input type="checkbox" name="query_myTextEditBox">
</td>
<td>
myTextEditBox
</td>
<td>
<select size ="1" name="myTextEditBox_compare_operator">
<option value="=">equals</option>
<option value="<>">does not equal</option>
</select>
</td>
<td>
<input type="text" name="myTextEditBox_compare_value">
</td>
<td class="center">
<input type="checkbox" name="report_myTextEditBox" value="checked">
</td>
</tr>
</table>
CSS
.
center {
text-align: center;
vertical-align: middle;
}
td, th {
padding: 5px;
}
tr {
height: 25px;
}
tr:hover{
background-color: yellow;
}
悬停属性确实突出显示表格行,但它排除了输入和复选框等子组件。当行悬停时如何突出显示这些组件
最佳答案
试试这个,除了你有什么...
tr:hover input{
background-color: yellow;
}
关于html - 突出显示表行内的子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32923815/