html - 如何在悬停在自身上时保持 html 显示？

Question

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

.hiding {
    display: none;
}

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

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

问题：我也想让课程hiding显示它何时悬停在自身上。目前它可以追溯到display:none你不再悬停在 class上的时候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来显示.hiding当元素.test悬停时（因为它存在，但原样.hiding为空display: none;）和最后但至少我们在第三个声明.test之后添加+，只是为了确保它不会违反规则，因为.hiding不再相邻.trigger，我们将.test其作为相邻元素.trigger

Answer 2

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

如果不返回悬停功能，它将保持悬停状态。

Answer 3

我能想到的唯一选择是将每组.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;
}

JS 小提琴演示。