Question

我有两个相邻的divs。一个只有一个标题（“ MENU”）。第二个是一个简单的目录。如果用户的屏幕宽度> = 800px，我想显示目录。在任何其他情况下，菜单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;
    }

很抱歉，如果我的问题的答案很明显-我是Web开发的新手。所有类似问题的答案要么使用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。

仅使用CSS

1 个答案: