javascript - JQuery 显示/隐藏具有匹配标题和 alt 标记的元素

Question

是否可以通过鼠标悬停在唯一匹配标签为 title 和 alt 的链接上显示图像？

我的 CMS 只能为 2 个完全独立的元素生成匹配的 title 和 alt 标签。大致是这样的:

<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>

我已经能够像这样定位 img:

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

但是我必须通过 [alt="title of this link i just hovered"] 获取图像，而不是特定目标 [alt="aubergine"] >.

这是到目前为止工作原型(prototype)的 fiddle : https://jsfiddle.net/82xnqu6j/1/

Answer 1

使用 jQuery 提取当前元素的 title 属性，如以下实例所示。

这样您就可以将其概括为所有匹配的链接。

实例:

$('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 版本:https://jsfiddle.net/82xnqu6j/4/