Question

我刚刚做了一个jquery工作来隐藏和显示图像上的链接。 'a'在图像上作为绝对位置坐着。

为此，我制作了这段代码：

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

这是我的HTML代码以及页面：

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

但这不起作用。任何人都帮助我，这与我的代码有什么关系？

感谢Advance！。

Answer 1

代码

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

从鼠标悬停目标开始（很可能是img？）并在树中向上查找链接。您的链接不是直接来自图片，因此选择器找不到它。

鉴于你当前的html结构，我会找到这样的链接：

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

Answer 2

链接中没有任何内容可以显示。

Answer 3

我怀疑你的问题是mouseover会在进入时触发，但不会在退出时触发，因此你的.toggle()不知道它是否正在进行。请尝试.hover()：

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

}）;

注意：函数已更改为使用.siblings()，因为a不是img的子节点。

编辑已更改为.hover()的单个回调版本，这与使用.toggle()而非使用.show()和{{1}的双回调版本更为一致}}

Jquery切换问题

3 个答案: