Блог

Я пытаюсь добиться простого эффекта наведения. Когда пользователь наводит курсор на изображение (представление, заполненное изображениями), на нем должен отображаться дополнительный div. Никаких проблем нет.

Но когда я хочу сделать противоположную вещь, скрыть тот же div, когда пользователь покидает область div, это не работает: div не исчезнет при выходе из области div (что должно быть сделано по умолчанию при использовании наведения курсора, нет?).

Это код, который я использую:

 $(document).ready(function () {
    $('.views-field-field-photo-fid').out(function () {
        showDiv($(this), $('.views-field-title'));
    });

    $('.views-field-field-photo-fid').out(function () {
        hideDiv($(this), $('.views-field-title'));
    });
});

function showDiv(sender, object) {
    $(object).show();
}

function hideDiv(sender, object) {
    $(object).hide();
}
  

До сих пор я пробовал .mouseenter , .mouseleave .hover , .out ,,,, но ничего не помогает скрыть div после выхода из области div.

Обновить
Я нашел решение, более или менее:

  $(document).ready(function() {
        $('#uicarousel-news-preview-block-2 .views-field-field-photo-fid').hover(
            function() { $(this).find('.views-field-title').show(); },
            function() { $(this).find('.views-field-title').hide(); }
        )
   });
  

Но поскольку их много .views-field-title , он скрывает / показывает и их тоже. Итак, я решил использовать find , но там нет решения.
Есть идеи?

Функция jQuery не вызывается, я не уверен, используете ли вы плагин или нет. В любом случае, вот как должно выглядеть правильное объявление о наведении курсора:

 <script style="text/javascript">
   $(document).ready(function() {
        $('.views-field-field-photo-fid').hover(
            function() {
                showDiv($(this), $('.views-field-title'));
            },
            function() {
                hideDiv($(this), $('.views-field-title'));
            });
    });

    function showDiv(sender, object) {
            $(object).show();
    }

    function hideDiv(sender, object) {
            $(object).hide();
    }
</script>
  

Я предлагаю вам взглянуть на документацию jQuery.hover.