將鼠標懸停在img上（引導程序3）

使用CSS我在遇到問題時稍後在頁面上顯示使用hover命令通過img標記顯示div。我正在使用Bootstrap 3編寫頁面 - 任何想法爲什麼這可能是一個問題？「hovershow」中的單詞出現在頁面上的正確位置，當它們最初不是使用CSS進行隱藏時，這使我認爲命令本身存在問題。將鼠標懸停在img上（引導程序3）

HTML

<div class="col-md-4 col-sm-4"> 
    <img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> 
</div> 

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
    <div class="hovershow"><p>This should show on hover</p></div> 
</div> 
</div>

CSS

.hovershow{ 
    display:none; 
} 

#Email_Logo:hover .hovershow{ 
    display: block; 
}

來源

2013-10-29 user2512696

與你的情況，你不能因爲在CSS你不能選擇父母，你可以改變你的'Email_logo'並將其移動一步，並使用'〜'兄弟選擇器，並選擇子 –

這絕對不是CSS是如何工作的。

下面的CSS意味着有一個元素.hovershow某處內#Email_Logo：

.#Email_Logo:hover .hovershow{ 
    display: block; 
}

嗯...這是不是這樣的。你想要的東西可以通過一些簡單的JavaScript或者HTML樹和CSS的改變來實現。

來源

2013-10-29 20:37:30 LuudJacobs

是否有可能爲非子元素顯示懸停的div？ – user2512696

用css不，你可以用js來做 – DaniP

非常感謝Danko！ – user2512696

將鼠標懸停在img上（引導程序3）

回答

相關問題