jQuery исчезает при наведении курсора мыши?

Question

У меня есть ссылки в следующей структуре, и я хотел бы знать, каким должен быть jQuery / css, чтобы скрыть <img /> теги и сглаживайте их при наведении курсора мыши.

Идея здесь заключается в том, что HTML <img> скрыт и исчезает при наведении курсора мыши, чтобы обеспечить плавный эффект.

Между тем, в начале отображается CSS-фон.

HTML:

<div id="nav">

<a href="blah" id="id1">

<img src="hoverimg.png" alt="Link Text 1" /> <span> Текст ссылки 1 </span> </a>

<img src="hoverimg2.png" alt="Link Text 2" /> <span> Текст ссылки 2 </span> </a>

</div>

CSS - файл:

#nav a span{
  display: none; /* Hide the text reader title */
}

#nav a {
  display: block;
  height: 200px;
  width: 250px;
  background url("bgimage.png"); /* I would ideally use the # selector for individual links.. */
}

#nav a img{
  /* what goes here so that jQuery works and so that we can backwards compatibility a:hover effect? */
}

jQuery - jQuery - запрос:

???

Кстати, я заметил, что jQuery будет запускать анимацию несколько раз, если целевой элемент является дочерним узлом, вложенным на несколько уровней глубже.Есть ли способ остановить это?

Answer 1

Просто добавьте style="display: none;" перейдите к изображению html, а затем используйте это:

       $("#nav").hover(
            function() {
                $("img", this).show();
            },
            function() {
                $("img", this).hide();
            });

(Измените эффекты в соответствии с вашими потребностями, если показывать / скрывать - это не то, что вам нужно)