我有一個「menutable」類的單元格，也是一個「畫廊」類的div，我想當鼠標移過可變div，畫廊div顯示

我有一個單元「可修改」類，也是一個分度，「畫廊」類，我想，當鼠標克服menutable格，畫廊DIV顯示我有一個「menutable」類的單元格，也是一個「畫廊」類的div，我想當鼠標移過可變div，畫廊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; 
    }

我怎麼能這樣做呢？

來源

2014-01-14 user3195822

你試過用Javascript嗎？〜選擇器用於兩個元素是兄弟的時候。這不適合你。 – donnywals

你不能用純CSS做到這一點，因爲它需要遍歷'.menutable'的祖先以達到'.gallery'，而CSS無法做到這一點。鑑於你的標記，它必須是一個JavaScript解決方案。 – ajp15243

可以使用.menu DIV的鼠標懸停顯示/隱藏整個.menu塊：

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

然而，隨着ajp15243在評論中指出，你不能這樣做（在純CSS）只需使用.menutable表格單元格的鼠標懸停，因爲CSS無法遍歷上的 DOM。

來源

2014-01-14 22:30:35 Blazemonger

對不起你誤會了，我不想要「.menu」隱藏，我想當鼠標移開「.menutable」class「.gallery」時顯示 – user3195822

我明白了。正如我所說，純CSS不可能。 – Blazemonger

我有一個「menutable」類的單元格，也是一個「畫廊」類的div，我想當鼠標移過可變div，畫廊div顯示

回答

相關問題