我有一个带有" menutable“类的单元格，也有一个带有" gallery”类的div，我想当鼠标移到menutable div上时，gallery div就会显示出来

Question

我有一个带有" menutable“类的单元格，也有一个带有" gallery”类的div，我想当鼠标移到menutable div上时，gallery div就会显示出来

<div class="menu">
     <table>
               <tr>
                  <td class="menutable"><a href="#">Gallery</a></td>
                  <td>...</td>
                  <td>...</td>
                  <td>...</td>  
               </tr>
     </table>
    </div>
    <div class="main">
          <div class="menuincluder">
            <div class="gallery" >
            </div>
          </div>
    </div>

这是css代码

   .menuincluder{
        position:relative;
        width:955px;
        height:340px;
        margin:auto;

    }
    .gallery{
        display:none;
        position:absolute;
        left:0px;
        top:0px;
        height:331px;
        width:946px;
        background-color:#FFF;
        padding:0px;
        margin:0px;
    }
    .menutable:hover ~ .gallery  /*this part didn't work!*/
    { 
        display:block;
        border:9px solid red;
    }

我怎么能做到呢？

Answer 1

您可以使用鼠标悬停在.menu div上来显示/隐藏整个.menu块：

.menu+.main {
    display: none;
}
.menu:hover+.main {
    display: block;
}

然而，正如ajp15243在评论中指出的那样，您不能(在纯CSS中)仅通过将鼠标悬停在.menutable表格单元格上来完成此操作，因为CSS不能遍历DOM。