2013-07-14 111 views
-1

我有2 div的一个标志 - 图标和文本。默认情况下,文本是隐藏的,只有当用户将鼠标悬停在图标上方时才会显示。不幸的是它不工作。鼠标悬停在DIVA影响DIVB

这是我的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; 
} 

回答

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

0

的CSS只能向下DOM树,你需要做的是有

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

你的代码正在寻找的是img:hover下的#logo-text。

0

你会想窝那两个,如果你的设计可容纳它:

这需要一个是另一个的孩子:

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> 

此外,你应该关闭你的形象标签。