CSS 悬停伪问题 class

Question

我有一个 link 的问题，当我悬停时它应该显示 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”是一个基本的锚元素，当我的代码建议悬停时会亮起白色，当我手动将“#adiv”显示回块时，我可以看到红色方块，真的不确定是什么干扰了它的显示。如果需要，我可以 post HTML，我在 codepen http://codepen.io/Keiffy101/pen/aOWJZa 上也有它，感谢任何帮助，我有点成熟，因为它似乎应该是直截了当的。

感谢 Keiffy101

Answer 1

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

}

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

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

30 CSS Selectors to Memorize

CSS 悬停伪问题 class

CSS issue with hover psuedo class

css

hover