懸停部門顯示隱藏的內容

我一直在試圖顯示一個隱藏的div在另一個div的懸停，並不明白爲什麼它不起作用。我有一個小提琴。 JSFiddle 懸停部門顯示隱藏的內容

HTML

<div class="mcs-div"> 
    <a href="#"> 
    <img src="http://lorempixel.com/100/100/" alt="Napit Graphic" /> 
    </a> 
</div> 

<div class="mcs-div-content"> 
    <p> 
    Ut arcu enim, dictum quis ultrices id, sagittis eget nulla 
    </p> 
</div>

我曾試圖隱藏DIV所有的選擇來顯示，但沒有什麼工作。

CSS

.mcs-div-content { 
display: none; 
} 
.mcs-div:hover .mcs-div-content { 
display: block; 
}

來源

2014-10-06 StudentRik

要理解爲什麼這不工作，請嘗試刪除：從CSS規則「懸停」，在它再看看。

.mcs-div-content不是包含在裏面.mcs-div，這樣規則永遠不會找到任何適合它的元素。嘗試用替換第二規則：

.mcs-div:hover + .mcs-div-content { 
    display: block; 
}

的+表示「下一個同級元素」。

來源

2014-10-06 13:54:58 Katana314

添加「〜」：

.mcs-div-content { 
    display: none; 
} 
.mcs-div:hover ~ .mcs-div-content { 
    display: block; 
}

來源

2014-10-06 13:56:24

MCS-DIV-內容不爲孩子MCS-DIV try

<div class="mcs-div"> 
    <a href="#"> 
    <img src="http://lorempixel.com/100/100/" alt="Napit Graphic" /> 
    </a> 


    <div class="mcs-div-content"> 
    <p> 
     Ut arcu enim, dictum quis ultrices id, sagittis eget nulla 
    </p> 
</div> 

    </div>

來源

2014-10-06 13:58:43 Fabio

懸停部門顯示隱藏的內容

回答

相關問題