Итак, я проектирую веб-сайт (используя WordPress), и я хочу использовать JQuery, чтобы скрыть / показать определенный элемент, когда другой элемент наведен поверх. HTML выглядит примерно так
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
<a href="...">...</a>
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
и JQuery выглядит так:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
То, что должно произойти, - это когда пользователь проводит мышью по изображению, содержимое связанного с ним автокрытия <div>
трансплантируется в следующую прокладку <div>
, а затем исчезает; при наведении мышки автокрытие <div>
исчезает и очищается.
Однако, если указатель не находится над изображением в течение полного времени нарастания, максимальная непрозрачность элемента spacer div, по-видимому, уменьшается до тех пор, пока наведение мыши не создаст никакого эффекта.
Я был бы очень признателен, если бы кто-нибудь, кто знает больше JQuery, чем я, мог бы пролить свет на эту тему; Я предполагаю, что это основная проблема (я никогда не использовал JQuery до этого проекта).
Заранее спасибо.