css伪类:悬停不工作

2022-01-22 00:00:00 hover css pseudo-class

我正在努力让一个最简单的 css hover 伪类工作.任何人都知道为什么以下不起作用?

I am struggling to get a simplest css hover pseudoclass to work. Anybody knows why the following doesnt work?

CSS

#hidden {display:none;}
#show:hover #hidden{display:block;}

html

<a href="#" id="show">show</a>
<div id="hidden">here i am</div>

我真的觉得问这么简单的问题很愚蠢,我这样做了一百次,但无法弄清楚为什么这不起作用.

I really feel stupid asking such a simple question, i did this a hunderd times, but cant figure out why this shouldnt work.

推荐答案

试试这个

#show:hover + #hidden{display:block;}

:hover #hidden 暗示 #hidden 是悬停元素的子元素.+ 选择器查找下一个相邻的兄弟.

:hover #hidden implies that #hidden is a child of the hover element. The + selector looks for the next adjacent sibling.

相关文章