jQuery исчезает при наведении курсора мыши?
Вопрос
У меня есть ссылки в следующей структуре, и я хотел бы знать, каким должен быть 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 будет запускать анимацию несколько раз, если целевой элемент является дочерним узлом, вложенным на несколько уровней глубже.Есть ли способ остановить это?
Решение
Просто добавьте style="display: none;"
перейдите к изображению html, а затем используйте это:
$("#nav").hover(
function() {
$("img", this).show();
},
function() {
$("img", this).hide();
});
(Измените эффекты в соответствии с вашими потребностями, если показывать / скрывать - это не то, что вам нужно)