为什么我的 CSS 不能正常工作？

Question

标题说明了一切；我的 css:

a.menu:hover {
opacity: 1;
text-shadow: 0 0 10px white;
}
a.menu:hover ~ .dropdown {
display: block;
}

.dropdown {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 120px;
left: 120px;
background: red;
}

HTML:

<p class="left_topbar">
    <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a>
        <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a>
</p>

<div class="dropdown"></div>

为什么将鼠标悬停在菜单上时，现在可以看到 .dropdown link？

Answer 1

你想改变

至

因为箭头是后代选择器，而加号是兄弟选择器。

Answer 2

实际上您的 h2 不是 h1 标签的子标签。您必须使用 sibling operator(+) 来实现此目的。

  h1:hover + h2{
     display: block;
  }

上述解决方案将指向下一个直接兄弟元素。如果要定位所有元素，请使用 ~ 运算符。

  h1:hover ~ h2{
     display: block;
  }

编辑：

根据您的编辑，您似乎必须更改如下顺序。

 a.menu:hover {
  opacity: 1;
  text-shadow: 0 0 10px white;
 }
 .dropdown {
   display: none;
   width: 50px;
   height: 50px;
   position: absolute;
   top: 120px;
   left: 120px;
   background: red;
  }
 a.menu:hover ~ .dropdown {
   display: block;
 }

HTML

 <div class="left_topbar">
      <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a>
      <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a>
      <div class="dropdown"></div>
 </div>

为什么我的 CSS 不能正常工作？

Why does my CSS not work as it should?

html

css

hover