Question

I have this jQuery code:

<script type="text/javascript"> 
$(function() {
    $(".one-edition img").hover(function() {
        $(this).next(".editions-info-text").show();
    }, function() {
        $(this).next(".editions-info-text").hide();
    });
}); 
</script>

Which, if the image under the div one-edition is hover’d over it shows the info text div, and when hovered out, it disappears – easy.

However, I’m trying to get it to work using the Fancybox gallery like so:

<div class="grid_3 one-edition">
    <a href="images/latest/MO20.jpg" rel="editions-1"><img src="http://placehold.it/200x250"></a>
    <a href="images/latest/MO20.jpg" rel="editions-1"></a>
    <a href="images/latest/MO20.jpg" rel="editions-1"></a>
        <div class="editions-info-text">
            <p>Title of edition</p>
            <p>Further information</p>
        </div>  
    </div>

The gallery works fine, but the editions-info-text is no longer showing or hiding. It must be something to do with wrapping the img in the anchor tag, but I’ve been trying to mess around with it for a while now and felt you guys might be able to help.

Answer 1

I think the problem comes from $(this).next(".editions-info-text").show();. $(this) should be the image element, but next() means to find the image’s siblings, but the .editions-info-text is not in its siblings. You need to rewrite the selector query a little bit.