Jquery切换问题

我刚做了一个jQuery的工作来隐藏和显示图像上的链接。 'a'坐在图像上的绝对位置。Jquery切换问题

要做到这一点，我做了这个代码：

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

但它不能正常工作。任何人都可以帮助我，这是我的代码的问题？

感谢提前！

来源

2011-05-18 3gwebtrain

你可以更精确的 – user695663 2011-05-18 06:33:57

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

来源

2011-05-18 06:30:38

+1安德鲁，漂亮的抓，我没有注意到这一点。 – kobe 2011-05-18 06:31:34

它可以使用CSS来显示背景图像。 – Magnar 2011-05-18 06:33:12

我怀疑你的问题是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()和.hide()双回调版本更加一致。

来源

2011-05-18 06:31:52 Alnitak

作为一个尝试我用这个。但是没有谐调.. – 3gwebtrain 2011-05-18 06:46:04

$（document）.ready（function（）{ var caseStudySlider = $（'div.case-study-slider img'）; caseStudySlider.bind（'hover'，function（e）{ $（e.target）.sibling（“span”）.css（{border：'1px solid red'}）; }， function（e）{（e.target）.sibling（“span”） .css（{border：'1px solid green'}）; } ）; }）; – 3gwebtrain 2011-05-18 06:46:13

也不是兄弟姐妹。 – Magnar 2011-05-18 06:46:49

代码

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

开始在鼠标悬停目标（最有可能img？），看起来在树向上的链接。你的链接不是直接从图像上，所以选择器没有找到它。

鉴于当前的HTML结构，我反而觉得这样的链接：

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

来源

2011-05-18 06:32:16 Magnar

Jquery切换问题

回答

相关问题