隱藏div的問題

我遇到了麻煩。我試圖讓.INFO顯示，當你將鼠標懸停在：
.infoBanner .open隱藏div的問題

HTML

<div class="infoBanner"> 
    <span><b>Click</b><span class="open">get info</span></span> 
</div> 
<div class="info"> 
    <span>This is more info</span> 
</div>

CSS

.info{ 
    display:none; 
} 

.open:hover{ 

    .info{ 
    display:block; 
    } 
}

來源

2014-02-12 gg11

這不能在你有你的HTML設置的方式來完成。在css中懸停後，您不能在頁面的其他選擇器中引用其他選擇器。考慮使用JavaScript來完成這個 –

你不能這樣做，因爲.info是不是一個孩子的.open。

下面的例子會的工作，因爲.info是.infoBaner

HTML

<div class="infoBanner"> 
     <span><b>Click</b> <span class="open">get info</span></span> 
     /* removed the </div> from here */ 
<div class="info"> 
    <span>This is more info</span> 
</div> 

</div> /* and placed it here */

CSS的孩子

.info{ 
    display:none; 
} 

.infoBanner:hover .info { 
    display: block; 
}

工作實例http://jsfiddle.net/Hqkdy/

編輯：要只打開它，如果你將鼠標懸停在「獲取信息」，跨度更改爲一個div和重新排列的東西，像這樣

HTML

<div class="infoBanner"> <span><b>Click</b> <div class="open">get info<div class="info"> 
    <span>This is more info</span> 
    </div> 
</div> 
</span> 
</div>

CSS

.info { 
    display:none; 
} 
.open:hover .info { 
    display:block; 
}

工作實例http://jsfiddle.net/Hqkdy/1/

來源

2014-02-12 03:08:49 CRABOLO

我需要改變什麼才能使這個工作？ – gg11

如果你有沒有進入三月KUP和修復需要只用CSS來實現試試這個

.infoBanner:hover + .info{  
    display:block;  
} 
.info{ 
    display:none; 
}

工作示例：

http://jsfiddle.net/AjLk4/

來源

2014-02-12 03:30:28 Jineesh

隱藏div的問題

回答

相關問題