jQuery исчезают при наведении курсора мыши? - PullRequest
Новая
       25

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

2 голосов
/ 10 марта 2010

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

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

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

Текст ссылки 1 Текст ссылки 1

Текст ссылки 2 Текст ссылки 2

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 будет запускать анимацию несколько раз, если целевой элемент является дочерним узлом, вложенным в несколько уровней.Есть ли способ остановить это?

1 Ответ

5 голосов
/ 10 марта 2010

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

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

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

...