Функция наведения мыши JQuery не работает

Question

У меня проблема с 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 ().

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

Francesco

Answer 1

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

Answer 2

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

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

Или используя .hide () / .show () , например:

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

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

Ура!

Answer 3

Найти рабочий образец здесь: 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>