JQuery Mouseover не работает по назначению

Question

Это HTML у меня есть:

<div id="social"> 
    <a href="#" class="twitter"><span class="text">Twitter</span></a> 
</div> 

То, что я собираюсь сделать, это изначально скрыть span.text и когда я наведите курсор мыши на изображение в фоне дел. Это мой CSS

#social a { 
    display:inline-block; 
    overflow:hidden; 
    padding:4px 0 0 28px; 
/* left padding is for the bg image to be visible*/ 
} 
#social a span { 
    display:none; 
} 
#social .twitter { 
    background:url(../images/social/twitter.png) no-repeat left top; 
} 
#social .twitter:hover { 
    background:url(../images/social/twitter_hover.png) no-repeat left top; 
} 

И это мой ЯШ:

$("#social a.twitter").mouseover(function(){ 
    $("span",this).show("slow"); 
}).mouseout(function(){ 
    $("span",this).hide("slow"); 
}); 

Но что происходит, когда я наведите курсор мыши на изображение, он держит на показ и скрытие текста .. Где я буду неправильно?

Answer 1

у вас есть очень распространенная проблема, когда пролетные показывает, мыши его больше не над а, поэтому событие MouseOut вызывается.

исправить это использование MouseEnter и MouseLeave события

$("#social a.twitter").mouseenter(function(){ 
    $("span",this).show("slow"); 
}).mouseleave(function(){ 
    $("span",this).hide("slow"); 
});​ 

fiddle for you :D

и, в CSS комментарии являются с /* */ и не с //

Answer 2

В вашем CSS:

// left padding is for the bg image to be visible 

// не является допустимым символом для комментариев.

Они должны быть обернуты в /* */ как:

/* left padding is for the bg image to be visible */ 

Answer 3

Вам не нужно (и не должен 't) использовать javascript для этого эффекта. Вы можете сделать это с помощью CSS, который является более чистым и более смысловым :). Пример:

​a.twitter { 
    display: block; 
    width: 300px; 
    height: 300px; 
    background: url('http://www.simplyzesty.com/wp-content/uploads/2012/01/twitter_newbird_boxed_whiteonblue2.png'); 
} 

a.twitter span { 
    opacity: 0; 
    -webkit-transition: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    transition: opacity 0.2s; 
} 

a.twitter:hover span { 
    opacity: 1; 
} 

jsFiddle: http://jsfiddle.net/Ut4Gx/

Answer 4

Попробуйте использовать mouseleave. Re mouseout:

Этот тип события может вызвать много головных болей из-за пузырьков событий. Для экземпляра , когда указатель мыши перемещается из внутреннего элемента в , этот пример будет отправлен на это событие мыши, затем просочится вверх в Outer. Это может вызвать связанный обработчик mouseout в нерабочее время раз. См. Обсуждение для .mouseleave() для полезной альтернативы.