jQuery显示/隐藏具有匹配标题和alt标签的元素

Question

Is it possible to show an image via mouseover on a link whose only matching tags are title and alt?

My CMS can only generate matching title and alt tags for 2 completely seperated elements. It roughly looks like this:

<a href="#" title="aubergine">hover this to show image</a>

<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>

I've been able to target the img like so:

$('a').mouseover(function() {
$('[alt="aubergine"]').css( "opacity", "100" );
});

But instead of the specific target [alt="aubergine"] i would have to get the image via [alt="title of this link i just hovered"] .

Here is a fiddle with the working prototype so far: https://jsfiddle.net/82xnqu6j/1/

Answer 1

Use jQuery to pull out the title attribute of your current element, like in the following live example.

That way you can generalize it for all matching links.

Live Example:

 $('a').mouseover(function() { $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "1" ); }); $('a').mouseout(function() { $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "0" ); }); 

 img {opacity:0;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" title="aubergine">hover this to show image</a> <img width="100" height="100" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img> 

JSFiddle Version: https://jsfiddle.net/82xnqu6j/4/

Answer 2

Simply try getting the actual title from the link and using it as part of the selector

    $('a').mouseover(function() { 
        $('[alt="'+this.title+'"]').css( "opacity", "100" );
    });

This applies to any attribute, such as title, src, href, etc.

Check the w3schools page for this in: http://www.w3schools.com/cssref/sel_attribute_value.asp

Answer 3

You can just use $(this).attr('title') to choose any attribution of the element in jQuery, same as this.title in native JavaScript.

 $('a').mouseover(function() { $('[alt="' + $(this).attr('title') + '"]').css("opacity", "100"); }); $('a').mouseout(function() { $('[alt="' + $(this).attr('title') + '"]').css("opacity", "0"); }); 

 img { opacity: 0 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" title="aubergine">hover this to show image</a> <a href="#" title="test">hover this to show image</a> <img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img> <img width="300" height="300" alt="test" src="http://i.stack.imgur.com/gVqLo.png"></img>