-4

我有一个页面，其中包含多行这样的行，每行都包含在<div id="result">;

<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">，并且还显示每个<a>标签，<div id="result">而不仅仅是用户悬停的标签。

我怎样才能解决这个问题？

4

4 回答 4

1

假设我了解您的奇怪之处：

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();   
});

见小提琴

用悬停编辑。

Nb：e.preventDefault();如果您不希望通过单击提交链接，则在单击事件上。

于 2013-02-09T15:54:32.457 回答
1

你可以试试这个——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-09T16:20:28.533 回答
0

试试这样：

$(document).ready(function(){
$('#result iframe').hover(function(){
    $('#result a').fadeIn(200);
    $('#result a').fadeOut(200);
});
});
于 2013-02-09T15:44:27.703 回答
0

如果您只想捕获<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);
    });
});

所以这将只针对第一个 id="result" 的 div。通过更改 nth-child(0) - nth-child(1) - nth-child(2) 来捕捉其他人...

另一种解决方案：您还可以为每个<a>标签设置一个 id，或者您也可以使用一个类来捕获您需要的特定元素。

于 2013-02-09T16:00:58.120 回答