悬停和CSS3之前的问题

Question

是否可以在:hover元素上生成:before以便显示某些内容？

Answer 1

是的，可以这样做..

.selector:hover:before {/* css rule goes here */}

Answer 2

无法向:hover或:active等任何元素添加:focus样式（或:before或:after）。它们必须应用于实际的HTML元素，而不是伪元素。

在屏幕截图中，您似乎正在尝试创建悬停菜单。根据您的样式，您可以将:hover样式应用于ul本身。但是，您只能使用CSS控制ul样式 - 如果没有JS，则无法根据父级的悬停状态控制li个样式。

如果JS是一个选项，请使用它 - 在这种情况下它应该非常简单，并且会使代码更容易。如果需要css-only，您可以通过将<ul>设置为特定高度（大到足以显示hover项而不是其他内容）来解决此问题，并给出{{1更高的高度，或ul:hover等。

Answer 3

它叫做offcanvas

参考https://www.w3schools.com/howto/howto_js_off-canvas.asp

AND https://v4-alpha.getbootstrap.com/examples/offcanvas/

如果您需要任何进一步的帮助，请告诉我