仅使用CSS显示带悬停的相邻div
仅使用CSS显示带悬停的相邻div
提问于 2018-11-07 23:16:05
我有两个相邻的divs。只有一个标题(“菜单”)。第二个是一个简单的目录。我想显示目录，如果用户的屏幕宽度是>= 800 to。在任何其他情况下，菜单div都是隐藏的，默认情况下目录是可见的。
为了根据屏幕大小显示/隐藏目录，我使用：
@media screen and (max-width: 800px) {
#tableOfContents { display: none; }
#menuSign { display: block}当用户悬停在菜单符号上时，我想出了如何显示目录，但是当光标从一个div移动到另一个div时，我不知道如何使它保持可见。
#menuSign:hover + #tableOfContents {
display: block;
background: #f00;
cursor: default;
background-color: darkgray;
color: white;
}对不起，如果我的问题的答案是显而易见的-我是全新的网络开发。所有类似问题的答案要么使用JS (我做不到)，要么没有解释如何使目录在屏幕上持久存在。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-07 23:57:18
如果div之间没有空空间，并且游标可以从一个无缝地流动到另一个，您可以尝试将选择器更改为：
#menuSign:hover + #tableOfContents, #tableOfContents:hover { display: block; }另外，作为个人建议，您应该尽量不要在CSS中使用in，这是错误的实践：https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4
此外，如果你试图创建一个简单的汉堡包导航菜单，最好是在用户点击按钮时显示菜单本身，而不是仅仅停留在按钮上，以便与不具备移动电话等悬停功能的设备保持一致。这可以通过多种不同的方式来实现，最简单的方法是使用一些非常简单的JavaScript (或jQuery，用于更简单的语法)来添加或删除您现在试图样式的元素的DOM父级上的类，或者使用像使用复选框作为菜单按钮的代理这样的哈克。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53199344
复制相关文章
相似问题
腾讯云开发者
