Jquery toggle issue

i just made a jquery work to hide and show a link on a image. the 'a' seated as position absolute on image.

To do this, i made this code :

$(document).ready(function(){
    var caseStudySlider = $('div.case-study-slider img');
    caseStudySlider.bind('mouseover',function(e){
        $(e.target).closest("a").toggle();开发者_Python百科
    })
})

and this this my HTML code as well on the page :

<div class="case-study-slider">
       <span class="slider-player"><a href="case-study-page-b.html"></a></span>
       <img height="270" width="702" alt="slider" src="images/slide-space-holder-type2.jpg" />
</div>

But it's not work. any one help me that, what this the issue with my code?

Thanks on Advance!.

The code

$(e.target).closest("a")

starts at the mouseover target (most likely img?) and looks for a link upwards in the tree. Your link isn't directly up from the image, so the selector doesn't find it.

Given your current html structure, I would instead find the link like this:

$(e.target).closest(".case-study-slider").find("a")

There's nothing in the link to show.

I suspect your problem is that mouseover will trigger on entry, but not on exit, so your .toggle() doesn't know whether it's coming or going. Try .hover() instead:

$(document).ready(function(){
    var caseStudySlider = $('div.case-study-slider img');
    caseStudySlider.bind('hover',
        function(e) {
            $(this).siblings("span").children("a").toggle();
        } 
    );

});

NB: functions changed to use .siblings() as the a isn't a child node of the img.

EDIT changed to the single callback version of .hover() which is more consistent with using .toggle() instead of the dual callback version using .show() and .hide().