Функция наведения мыши Javascript mouseenter () не работает

Я пытался создать эффект, при котором я навожу курсор на изображение, и все изображение становится белым с текстом, но мой код не работает, не мог бы кто-нибудь поговорить и дать мне знать, что я делал неправильно? http://jsfiddle.net/MBsbj/

<div class="frontImages"><img class="alignnone size-full wp-image-24" alt="biryani sideimage" src="http://tandoorifreshonline.com.mlseo.net/wp-content/uploads/2013/11/biryani-sideimage.png"/>
<div class="hoverText">HOVER TEXT HERE</div>
</div>

    $('.frontImages').mouseenter(function(){
$('.hoverText').fadeIn();
});

.hoverText {
display:none; 
}

Примечание. Этот код был основан на этом потоке: Показать текст, когда курсор нависает над изображением - однако, когда я ввел код из ответа, он тоже не работает. http://jsfiddle.net/nMCbY/

Спасибо!


javascript hover mouseover mouseenter mouseleave
person mcheah    schedule 02.11.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш код работает так, как есть, вам нужно только добавить ссылку на jQuery в свой JSFiddle, чтобы он заработал. Смотрите обновленные скрипки: http://jsfiddle.net/MBsbj/1/ и http://jsfiddle.net/nMCbY/1/

Я также отредактировал вторую скрипку, чтобы поместить заголовок над изображением, а не под ним, добавив:

caption.offset({ top: image.position().top })

См.: http://jsfiddle.net/nMCbY/3/.

person Jos Vinke    schedule 02.11.2013
comment
Спасибо! Кажется, у меня все правильно на веб-сайте, над которым я работаю, но похоже, что он все еще не работает для меня... не могли бы вы взглянуть и посмотреть, не сделал ли я что-то не так? tandoorifreshonline.com.mlseo.net В настоящее время все изображения на главной странице используют один и тот же класс, поэтому при наведении курсора на любой из них должен отображаться весь их текст при наведении - я исправлю это позже, но сначала я хотел убедиться, что он работает. - person mcheah; 04.11.2013
comment
Я посмотрел, и это работает: jQuery('.frontImages').mouseenter(function(){ jQuery('.hoverText').fadeIn(); }); Чтобы привязать jQuery к $, см. этот ответ: stackoverflow.com/a/6109983/849741 - person Jos Vinke; 04.11.2013
comment
Спасибо за просмотр. Это так странно для меня. Я использовал ваш код, но он работает только в том случае, если я загружаю страницу, захожу в firebug и добавляю или удаляю что-то незначительное, например, дополнительный пробел или что-то еще из кода. Любая причина, по которой это будет делать это? Большое спасибо за помощь кстати. - person mcheah; 05.11.2013
comment
Вы должны инициализировать код в готовом документе (там, где вы ранее показывали предупреждение о загрузке jQuery). Вот так: jQuery(document).ready(function() { jQuery('.frontImages').mouseenter(function(){ jQuery( '.hoverText').fadeIn(); }); }); - person Jos Vinke; 05.11.2013