I want to do 2 .hover :

• first when the cursor is hover the image icons should appear on the image

• second when the cursor is hover a specific icon, (for exemple info) a div with the informations should appear

I have nearly sucess but I have blinkin problems and when I use the two .hover function the information popup does not show up.

here my html

{LinkOpenTag}<div class="centrage"><div class="photoDiv"><img src="{PhotoURL-500}" alt="{PhotoAlt}" />
                                        <div class="icons">

                                            {block:Exif}
                                            <span class="info"><span>
                                            <div class="exif" style="display: none; opacity: 0">
                                                    <ol class="CameraMeta">
                                                        <li>{block:Camera}Camera: {Camera}{/block:Camera}</li>
                                                        <li>{block:Aperture}Aperture: {Aperture}{/block:Aperture}</li>
                                                        <li>{block:Exposure}Exposure: {Exposure}{/block:Exposure}</li>
                                                        <li>{block:FocalLength}Focal Length: {FocalLength}{/block:FocalLength}</li>
                                                    </ol>
                                            </div>
                                            {/block:Exif}
                                        </div>
</div>{LinkCloseTag}

and here my jquery

<script type="text/javascript"> 
$(".photoDiv img").hover(
    function() {
        $(this).next().css("visibility", "visible");
    },
    function() {
        $(this).next().css("visibility", "hidden");
    }
);

$("span.info").hover(
    function() {
        $(".exif").css("display", "block");
        $(".exif").css("opacity", "1");
    },
    function() {
        $(".exif").css("display", "none");
        $(".exif").css("opacity", "0");
    }
);

Thanks for your time :)