为什么我的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现在可见？

Answer 1

实际上，您的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>

Answer 2

您想要更改

> 

到

+

由于箭头是后代选择器，而加号是兄弟选择器。