функция наведения курсора мыши на jQuery не работает

#javascript #jquery #visibility

#javascript #jquery #видимость

Вопрос:

У меня проблема с jQuery. Я пытаюсь заставить изображение появляться (или исчезать) при событии onmouseover и исчезать (или гаснуть) при событии onmouseout. HTML, который у меня есть, является:

 <div class="wrapper">
<img id="mainImg" src="..." />
</div>

CSS:

 #mainImg
{
visibility:hidden;
}

И JavaScript выглядит следующим образом:

 $("#mainImg").mouseover(function () {
    $(this).attr("visibility", "visible");
  }).mouseout( function () {
    $(this).attr("visibility", "hidden");
  });

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

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

Франческо

Ответ №1:

Видимость — это не атрибут HTML; это функция CSS. Попробуйте использовать css () вместо attr().

1. Да, и я бы вместо этого использовал: $(this).css("display","block") и $(this).css("display","none")

2. Вы можете изменить opacity на 0 вместо изменения visibiliy . Это не совсем то же поведение, но это обходной путь. обновленный пример

3. Очевидно, наведение курсора мыши не работает на невидимых объектах… Не знал этого. Если вы измените свой CSS так, чтобы div.left изначально был виден, это сработает один раз при наведении курсора мыши, а затем перестанет работать. Поэтому я думаю, что обходной путь Сильвена здесь является хорошим вариантом.

4. @Sylvain Thrd: спасибо, ваш пример работает отлично. Очевидно, установка непрозрачности является менее трудоемкой операцией для скрипта, потому что время отклика на события (onmouseover и onmouseout) быстрее, чем настройка видимости! Вы знаете, есть ли какая-либо конкретная причина?

Ответ №2:

Найти рабочий образец здесь:http://jsfiddle.net/ezmilhouse/MegL9/1 /

вы столкнетесь с проблемами при запуске событий на невидимых элементах, лучше прикрепите событие к .wrapper:

ваш js:

 $(".wrapper").mouseover(function () {
    $('img', this).css("visibility", "visible");
});

$(".wrapper").mouseout(function () {
    $('img', this).css("visibility", "hidden");
});

ваш html:

 <div class="wrapper">
    <img id="mainImg" src="http://www.google.com/images/logos/ps_logo2.png" />
</div>

1. Спасибо. Ваше решение работает, но иногда изображение застревает в режиме «видимость: скрыто», даже если я наведу курсор мыши. Зависит ли это от размера оболочки?

2. да, в принципе, вам не нужно, чтобы она имела фиксированную ширину, высоту — обновленная скрипка: jsfiddle.net/ezmilhouse/MegL9/4 , пожалуйста, примите, если это помогло решить вашу проблему, спасибо

Ответ №3:

На самом деле правильный способ сделать это — использовать .toggle() функцию. Что-то вроде этого:

 $("#mainImg").mouseover(function () {
    $(this).toggle();
  }).mouseout( function () {
    $(this).toggle();
  });

Или с помощью .hide() / .show(), вот так:

 $("#mainImg").mouseover(function () {
    $(this).hide();
  }).mouseout( function () {
    $(this).show();
  });

Самое классное в том, что вы можете задавать анимации для видимых / невидимых переходов.

Приветствия!