So I’m designing a website (using WordPress), and I want to use JQuery to

Question

0

Asked: May 18, 20262026-05-18T05:19:12+00:00 2026-05-18T05:19:12+00:00

So I’m designing a website (using WordPress), and I want to use JQuery to

0

So I’m designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this

<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" />

and the JQuery looks like this:

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();
    });
});

What’s supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.

However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.

I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it’s a basic problem (I’ve never used JQuery before this project).

Thanks in advance.