交換帶有文本的圖像（CSS或jQuery？）

Question

我試圖用鼠標懸停上的文本交換圖像標誌。

我一直在尋找jquery和css來創建這個過渡，但我找不到解決方案。希望你能幫助我一點。

這就是我所堅持的。

例 http://jsfiddle.net/VugzA/

HTML

<div id="logo"> 
<ul> 
    <li> 
     <a href="#home" title="Back to Home?">       

      <span class="logo_icon"> 
       <img src="some.gif" alt="Logo image" width="45" height="55" /> 
      </span> 

      <span class="text">Some Text</span> 

     </a> 
    </li> 
</ul> 
</div> 

CSS

#logo ul { 
list-style: none; 
margin-left: -20px; 
} 

.logo_icon { 
display: block; 
} 

.logo_icon:hover { 
display: none; 
} 

.text { 
display: none; 
} 

.logo_icon:hover + .text { 
display: block 
} 

Answer 1

這裏是更新了自己的fiddle

更新的HTML：

<div id="logo"> 
<a href="#home" title="Back to Home?">       
<span class="logo_icon"> 
<img src="some.gif" alt="Logo image" width="45" height="55" /> 
</span> 
<span class="text">Some Text</span> 
</a> 
</div> 

和更新的CSS：

.logo_icon { 
    display: block; 
} 
.text { 
    display: none; 
} 
#logo a:hover .logo_icon 
{ 
    display:none; 
} 
#logo a:hover .text 
{ 
    display:block; 
} 

什麼，我在這裏做的是鏈接，而不是像你這樣（圖像和文本懸停）上扎hover事件，圖像和文本範圍是兒童的那個元素。因此，當您將鼠標懸停在鏈接上時，會應用特定的樣式。