将鼠标悬停在< a>上方，然后显示一个或多个图像.标签 [英] Make an Image(s) appear after hovering over an <a> tag(s)

问题描述

我目前正在使用按钮和图像.我看过几本教程，了解如何将鼠标悬停在图像上后出现一个按钮.我正在尝试执行此操作的相反操作.我的问题:用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屋！