html - 我想让ul li a()隐藏。当我将鼠标悬停在h2标签上时，ul li a()将显示

代码如下：

.contentGruop ul{
  margin:0;
  padding:0;
}
.contentGruop li {
  list-style: outside none none;
}
.contentGruop a{
  color:#fff;
}
.contentGruop{
  display:none;
}
h2{
  display:block;
}
h2:hover + .contentGruop {
  display: block;
}

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
  <tr>
    <td>
      <h2><a href="#" class="AGreen">Sweater</a></h2>
      <p>The code business</p>
      <ul class="contentGruop">
        <li><a href="">Intimate-Attire</a></li>
        <li><a href="">Intimate-Attire</a></li>
        <li><a href="">Intimate-Attire</a></li>
      </ul>
    </td>
  </tr>
</table>

它不起作用。如果有人知道我在哪里可以找到一个代码示例，或者可以指引我正确的方向，我将非常感谢！啊！

最佳答案

用~（General sibling selectors）代替+（Adjacent sibling selectors）。
就像：

h2:hover ~ .contentGruop {
  display: block;
}

请看下面的片段：

.contentGruop {
    margin:0;
    padding:0;
}
.contentGruop li {list-style: outside none none;}
.contentGruop a{color:#000;}
.contentGruop{display:none;}

h2{display:block;}

h2:hover ~ .contentGruop {display: block;}

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
        <tr>
         <td>
            <h2><a href="#" class="AGreen">Sweater</a></h2>
            <p>The code business</p>
            <ul class="contentGruop">
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
            </ul>
        </td>
    </tr>
</table>

希望这有帮助！