jQuery on hover顯示多個元素

-4

我有一個頁面，其中包含多行像這樣每個包裹<div id="result">;jQuery on hover顯示多個元素

<div id="result"><a href="http://www.domain.com/">Link Name</a><iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px" scrolling="no"></iframe></div>

我目前使用以下jQuery來顯示懸停的<a>標籤;

$(document).ready(function(){ 
    $('#result iframe').hover(function(){ 
     $('#result a').fadeIn(200); 
    },function(){ 
     $('#result a').fadeOut(200); 
    }); 
});

然而，懸停僅適用於第一<div id="result">，也顯示了每<div id="result">而不僅僅是一個用戶徘徊在<a>標籤。

我該如何解決這個問題？

來源

2013-02-09 user2036031

使用類，ID不能ocurre不止一次文件內。 – soyuka 2013-02-09 15:44:26

你可以試試這個 - 改變results一類

$(document).ready(function(){ 
    $('.result').hover(function(){ // <-- change to class.. and bind to wrapper div 
     $(this).find('a').fadeIn(200); 
    },function(){ 
     $(this).find('a').fadeOut(200); 
    }); 
});

來源

2013-02-09 16:20:28

試試這樣說：

$(document).ready(function(){ 
$('#result iframe').hover(function(){ 
    $('#result a').fadeIn(200); 
    $('#result a').fadeOut(200); 
}); 
});

來源

2013-02-09 15:44:27 Ishpreet

這比原始代碼差。 – reinder 2013-02-09 15:46:03

對不起@reinder，但我不知道.fadein或淡出做什麼。這是我的代碼中的問題。我只是做一般性發言。請糾正我，這樣我就不會做錯 – Ishpreet 2013-02-09 15:55:33

假設我理解你的奇怪的事情：

的Html

<div class="result"> 
     <a href="http://www.domain.com/" style="display:none;">Link Name</a> 
     <iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe> 
    </div> 
    <div class="result"> 
     <a href="http://www.domain.com/" style="display:none;">Link Name</a> 
     <iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe> 
    </div>

jQuery的

$('.result iframe').hover(function(e) { 
    $(this).parent().find('a').fadeIn(); 
}, function() { 
    $(this).parent().find('a').fadeOut(); 
});

請參閱fiddle

使用懸停進行編輯。

如果您不希望鏈接通過點擊提交，請點擊事件中的Nb：e.preventDefault();。

來源

2013-02-09 15:54:32 soyuka

編輯應該工作 – soyuka 2013-02-09 16:07:38

有點奇怪你不覺得嗎？如果你將永遠無法點擊鏈接，因爲它在mouseleave上淡出 – 2013-02-09 16:18:53

重新編輯，但它真的很奇怪，你的鏈接是非常長的加載...什麼是鏈接點在圖像的鼠標輸入消失...也許你應該以不同的方式做到這一點。 – soyuka 2013-02-09 16:25:21

如果你想趕上只有<a>標籤並不適用於所有，但對於一個特定的<div id="result">，你可以嘗試指定在jQuery代碼，例如：

$(document).ready(function(){ 
    $('#result:nth-child(1) iframe').hover(function(){ 
     $('#result:nth-child(1) a').fadeIn(200); 
    },function(){ 
     $('#result:nth-child(1) a').fadeOut(200); 
    }); 
});

因此，這將只有目標第一個div與id =「結果」。通過改變第n個孩子（0）抓住別人 - 第n個孩子（1） - 第n個孩子（2）...

另一種解決方案：您還可以設置一個ID爲每個<a>標籤或也，你可以使用一個類來捕捉你需要的特定元素。

來源

2013-02-09 16:00:58

jQuery on hover顯示多個元素

回答

相關問題