鼠標懸停在DIVA影響DIVB

Question

我有2 div的一個標誌 - 圖標和文本。默認情況下，文本是隱藏的，只有當用戶將鼠標懸停在圖標上方時纔會顯示。不幸的是它不工作。

這是我的HTML代碼：

<h1 class="site-title"><a href="http://localhost/themes/" rel="home"> 
    <div id="logo-icon"> 
     <img src="http://localhost/themes/wp-content/theme/img/logo_icon.png" class="anim"> 
    </div> 
    <div id="logo-text"> 
     <img src="http://localhost/themes/wp-content/theme/img/logo_text.png" class="anim"> 
    </div> 
</a></h1> 

的CSS：

#logo-text, #logo-icon { 
    display: inline; 
    float: left; 
} 
#logo-text img.anim { 
    opacity: 0; 
} 
#logo-icon img:hover #logo-text img.anim { 
    opacity: 1; 
} 

Answer 1

鑑於您的標記，你可能只想讓在H1的用戶將鼠標懸停到觸發動畫。

#logo-text, #logo-icon { 
    display: inline; 
    float: left; 
} 
#logo-text img.anim { 
    opacity: 0; 
} 
.site-title:hover #logo-text img.anim { 
    opacity: 1; 
} 

Here's a fiddle。

Answer 2

的CSS只能向下DOM樹，你需要做的是有

.site-title:hover img.anim{opacity: 1;} 

你的代碼正在尋找的是img：hover下的＃logo-text。

Answer 3

你會想窩那兩個，如果你的設計可容納它：

這需要一個是另一個的孩子：

logo-icon img:hover #logo-text img.anim 

因此，像這樣爲你的DOM：

<h1 class="site-title"><a href="http://localhost/themes/" rel="home"> 
    <div id="logo-icon"> 
     <img src="http://localhost/themes/wp-content/theme/img/logo_icon.png" class="anim" /> 
     <div id="logo-text"> 
      <img src="http://localhost/themes/wp-content/theme/img/logo_text.png" class="anim" /> 
     </div> 
    </div>  
</a></h1> 

此外，你應該關閉你的形象標籤。