Question

I have a page that contains multiple lines like this each wrapped within <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>

I am currently using the following jQuery to display the <a> tag on hover;

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

However, the hover only works on the first <div id="result"> and also shows the <a> tags for every <div id="result"> rather than just the one the user hovered on.

How can I fix this?

Answer 1

You can try this – Changing results to a class

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