Как я могу сделать интервал, когда наведите курсор на изображение с помощью jquery?

0

У меня есть этот код, который работает, когда я наводил курсор на изображение, но когда я нависаю над ним, он возвращается к непрозрачности 0. Также диапазон не отображается в первом изображении?

    $(document).ready(function() {
        var $img = $('.carousel-inner li img'),
            $text = $('.carousel-inner li span');

            $img.hover(function() {
                $text.stop().animate({
                    opacity: 1,
                    height: '75px'
                }, 500);
                },function() {
                    $text.stop().animate({
                    opacity: 0,
                    height: '0px'
                }, 500);
            });
    });

Вы можете посмотреть пример ЗДЕСЬ

  • 0
    не скрывайте, когда вы наведите курсор мыши на изображение. Очевидно, вы хотите, чтобы он скрывался, поэтому лучшим решением было бы переместить ваш курсор вверх к li, а не к img.
Теги:

3 ответа

0
Лучший ответ

Я заработал. Вместо

var $img = $('.carousel-inner li img'),

я кладу

var $img = $('.carousel-inner li')

Я удалил img из вара так, когда я парить над всей li моей функция работала, вместо того, чтобы просто парю над img.

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

Поделиться
  • 0
    вы, вероятно, хотите $("span",this) а не $text
  • 0
    @KevinB Код работает для всех остальных изображений, кроме первого. Промежуток появляется со всеми изображениями, когда парил без проблем, просто не появляется на первом. Это может быть мой файл carousel.js?
Показать ещё 6 комментариев
1

Я считаю, что вы должны использовать функцию $.hover() в <li> (контейнере), а не только <img>.

var $li = $('.carousel-inner li')

...

$li.hover(function() { ... }

Вы можете увидеть эффект здесь: http://jsbin.com/EGOsuYi/1/

Поделиться
  • 0
    Да, я понял, что моя проблема сейчас в том, что промежуток не появляется на первом изображении по какой-то странной причине. Сделай эту скрипку, если хочешь на нее взглянуть.
0

Вы должны обратиться к обертке обоих:

$('.carousel-inner li').on('mouseenter',function() {
     //show text
});
$('.carousel-inner li').on('mouseleave',function() {
     //hide text
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню