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切換問題

回答

相關問題