当用户单击行中的任意位置时,我需要选择一个无线电输入,并在鼠标穿过该行时突出显示该行。我一直在尝试一些选项,但除了使用 jquery/javascript 之外,无法获得任何其他选项,但我确信有某种方法可以使其与纯 html/css 一起使用。
我知道可以通过使用标签+输入加上“表格”或“显示:表格行;”来完成或宽度,但我就是无法使其工作。 我将不胜感激任何帮助。
在
tr
上使用 css 以获得悬停效果,例如:
ROW_CLASS:hover{
background-color: COLOR
}
然后在所有
tr
上添加一个点击事件处理程序,无论是否有 jquery 中的类:
$("tr").click(function() {
$(this).find("input:radio:first").prop("checked", true).trigger("click");
});
经过几个小时的阅读和测试,我设法解决了这个问题。在这里,您甚至可以兼容 IE8+,适用于输入无线电和复选框。您可以根据需要更改宽度和颜色。 CSS:
.div-table{
display:table;
width:100%;
}
.div-table-row{
display: table-row;
width: auto;
clear:both;
}
.div-table-row:hover{
background-color: #ecf0f1;
}
.div-table-col>input{
float:left;/*fix for buggy browsers*/
display:table-column;
width: 6%;
outline: none !important;
}
.div-table-col>label{
float:left;/*fix for buggy browsers*/
display:table-column;
width: 94%;
}
.div-table-col>input:checked + label{
background-color: #ecf0f1;
}
HTML 看起来像这样(根据需要添加任意多的行):
<form action="" class="div-table">
<div class="div-table-row">
<div class="div-table-col">
<input type="radio" name="nametest" id="t1" value="1">
<label for="t1"> Blablabla</label>
</div>
</div>
<div class="div-table-row">
<div class="div-table-col">
<input type="radio" name="nametest" id="t2" value="2">
<label for="t2"> Blablabla Blablabla Blablabla Blablabla</label>
</div>
</div>
</form>