html - 仅使用 CSS 显示带有悬停的相邻 div

Question

我有两个相邻的 div。一个只有一个标题(“MENU”)。第二个是一个简单的目录。如果用户的屏幕宽度 >= 800px，我想显示目录。在任何其他情况下，MENU div 是隐藏的，默认情况下目录是可见的。

为了根据屏幕大小显示/隐藏目录，我使用:

@media screen and (max-width: 800px) {
  #tableOfContents  { display: none; }
  #menuSign { display: block}

我想出了当用户将鼠标悬停在 MENU 标志上时如何显示目录，但我不知道如何在光标从一个 div 移动到另一个 div 时使其保持可见。

#menuSign:hover + #tableOfContents {
    display: block; 
    background: #f00;
    cursor: default;
    background-color: darkgray;
    color: white;
    }

如果我的问题的答案很明显，我很抱歉 - 我是网络开发的新手。类似问题的所有答案要么使用 JS(我不能这样做)，要么没有解释如何使目录在屏幕上保持不变。

Answer 1

如果 div 之间没有空白，并且光标可以从一个无缝地移动到另一个，您可以尝试将选择器更改为:

#menuSign:hover + #tableOfContents, #tableOfContents:hover { display: block; }

此外，作为个人建议，您应该尽量不要在 CSS 中使用 ID，这是不好的做法:https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4

此外，如果您尝试创建一个简单的汉堡包导航菜单，最好在用户单击按钮时显示菜单本身，而不是仅仅将鼠标悬停在按钮上，以便与没有悬停功能的设备保持一致像手机。这可以通过多种不同的方式实现，最简单的涉及一些非常简单的 JavaScript(或 jQuery, for the simpler syntax )以在您现在尝试设置样式的元素的 DOM 父级上添加或删除一个类，或者使用像 using a checkbox as a proxy for the menu button 这样的 hack。