我之前在这里找到了这个解决方案。
.hiding {
display: none;
}
.trigger:hover + .hiding {
display:table-row;
}
它隐藏一个表格行,然后在将鼠标悬停在另一个表格行上时显示它(类触发器)。
问题:我也想让课程hiding
显示它何时悬停在自身上。目前它可以追溯到display:none
你不再悬停在 class上的时候trigger
。
您正在使用+
哪个是相邻元素选择器,我建议您将元素包装.hiding
在另一个元素中,比如类.test
,而不是像这样更改您的选择器
.test .hiding {
display: none;
}
.test:hover .hiding {
display: table-row;
}
.trigger:hover + .test .hiding {
display:table-row;
}
所以我们在这里所做的是我们隐藏嵌套在.test
其中的元素,在这种情况下是.hiding
,然后我们使用第二个选择器:hover
来显示.hiding
当元素.test
悬停时(因为它存在,但原样.hiding
为空display: none;
)和最后但至少我们在第三个声明.test
之后添加+
,只是为了确保它不会违反规则,因为.hiding
不再相邻.trigger
,我们将.test
其作为相邻元素.trigger
你不能只用 css 做到这一点。你需要 jquery 或 javascript
尝试这个
$(document).ready(function(){
$(".trigger").hover(function () {
$(this).css({"display" : "table-row"});
//or u can add class like this
//$(this).addClass("");
},function () {
//if you want return back, you can do here
});
});
如果不返回悬停功能,它将保持悬停状态。
我能想到的唯一选择是将每组.trigger
和.hiding
元素包装在 a中,并将显示/tbody
隐藏行为基于 the :hover
:tbody
HTML:
<table>
<tbody>
<tr class="trigger">
<td>text</td>
</tr>
<tr class="hiding">
<td>hidden text</td>
</tr>
</tbody>
<!-- and so on... -->
</table>
CSS:
tbody .hiding {
display: none;
}
tbody:hover .hiding {
display: table-row;
}