悬停伪类的 CSS 问题

Question

我有一个链接的问题，当我悬停它时它应该显示我设置的 div，基本 CSS 看起来像这样，

#adiv { 
max-height: 50px;
max-width: 50px;
z-index: 5;
display: none;
background-color: red;
}


#a:hover + #adiv {
display: block;

}

#a:hover {
color: white;
}

“#a”是一个基本的 anchor 元素，当我的代码建议悬停时会亮起白色，当我手动将“#adiv”显示回阻止时，我可以看到红色方 block ，真的不确定是什么破坏了它从显示。如果需要，我可以发布 HTML，我在 codepen 上也有它 http://codepen.io/Keiffy101/pen/aOWJZa感谢任何帮助，我有点成熟，因为它似乎应该是直截了当的。

感谢 Keiffy101

Answer 1

#a:hover + #adiv {
display: block;

}

这是行不通的，因为它假定 #a 是 #adiv 的直接兄弟...换句话说，#adiv 立即在您的 HTML 中跟在 #a 之后……但事实并非如此。

事实上，鉴于您当前的 HTML 结构，将鼠标悬停在 #a 上无法影响 #adiv，因为这两个元素不共享一个公共(public)父元素。

30 CSS Selectors to Memorize