gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 16:42:07 26 4
gpt4 key购买 nike

是否可以通过鼠标悬停在唯一匹配标签为 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/

最佳答案

使用 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/

关于javascript - JQuery 显示/隐藏具有匹配标题和 alt 标记的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31799108/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com