Question

我之前在这里找到了这个解决方案。

.hiding {
    display: none;
}

.trigger:hover + .hiding {
    display:table-row;
}

它隐藏了一个表行，然后将鼠标悬停在另一个表行（类触发器）上时显示它。

问题：我希望课程hiding能够显示它何时悬停在自身上。目前，当您不再徘徊在课程display:none上时，它会返回trigger。

Answer 1

你正在使用+这是一个相邻的元素选择器，我建议你将元素.hiding包含在另一个元素中，比如类.test，然后改变你的选择器，如

.test .hiding {
    display: none;
}

.test:hover .hiding {
   display: table-row;
}

.trigger:hover + .test .hiding {
    display:table-row;
}

所以我们在这里做的是隐藏嵌套在.test内的元素，在这种情况下是.hiding，而我们使用第二个选择器:hover来展示{ {1}}当.hiding的元素悬停时（因为它存在，但.test为.hiding为空），最后但并非最不重要，我们在display: none;之后添加.test第3个声明中的{1}}，为了确保它不会违反规则，因为+不再与.hiding相邻，我们.trigger作为.test的相邻元素1}}

Answer 2

我能想到的唯一选择是在.trigger中包含每组.hiding和tbody个元素，并将显示/隐藏行为基于{{1}那个:hover：

HTML：

tbody

CSS：

<table>
    <tbody>
        <tr class="trigger">
            <td>text</td>
        </tr>
        <tr class="hiding">
            <td>hidden text</td>
        </tr>
    </tbody>
    <!-- and so on... -->
</table>

JS Fiddle demo

Answer 3

你不能只用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
   });
});

如果你没有返回悬停功能，它会保持悬停状态。

如何在悬停时保持html显示？

3 个答案: