Сменить изображение с текстом (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 событие по ссылке, а не как вы сделали (зависать на изображение и текст), а также изображение и текст пядь дети этого элемента. Таким образом, когда вы наводите курсор на ссылку, применяются особые стили.