将鼠标悬停在< a>上方,然后显示一个或多个图像.标签 [英] Make an Image(s) appear after hovering over an <a> tag(s)
本文介绍了将鼠标悬停在< a>上方,然后显示一个或多个图像.标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前正在使用按钮和图像.我看过几本教程,了解如何将鼠标悬停在图像上后出现一个按钮.我正在尝试执行此操作的相反操作.我的问题:用jquery悬停在<a>
标记上后,如何显示图片?是否有可能?
I am currently working with buttons and images. I have seen several tutorials for gettting a button to appear after hovering over an image. I am trying to do the reverse of this operation. My question: how can I get a picture(s) to appear after hovering over an a <a>
tag(s) with jquery? Is it possible?
HTML
<a href="example.htm" class="large magenta awesome">Cheeseburger »</a>
<a href="example.htm" class="large blue awesome">Tacos »</a>
<a href="example.htm" class="large red awesome">Salads »</a>
<a href="example.htm" class="large orange awesome">Bread Sticks »</a>
<a href="example.htm" class="large yellow awesome">Dessert »</a>
推荐答案
我认为最好的方法是使用data-[type]
并将其与ID,类或其他数据类型进行比较.您也可以通过一门课程来做到这一点.
I think the best idea is to use a data-[type]
and compare it with an ID, class or other data-type. You can also do this with a class ofcourse.
这是小提琴.这是jQuery代码:
Here is a fiddle. And here is the jQuery code:
$("div#links > a").hover(
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).stop(true).hide();
}
);
这篇关于将鼠标悬停在< a>上方,然后显示一个或多个图像.标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文