Question

我目前正在处理按钮和图像。我已经看过几个教程，用于在将鼠标悬停在图像上后获取按钮。我正在尝试执行此操作的相反操作。我的问题：如何在用jquery悬停在<a>标签上后显示图片？可能吗？

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>

Answer 1

我认为最好的想法是使用data-[type]并将其与ID，类或其他数据类型进行比较。你也可以用一类课程来做到这一点。

这是fiddle。这是jQuery代码：

$("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();
    }
);

Answer 2

使用jquery的悬停方法，其工作方式如下：

$('a.orange').hover(
    function() {
        $('.someImage').show();
    },
    function() {
        $('.someImage').hide();
    }
);

http://api.jquery.com/hover/

将鼠标悬停在<a> tag(s)</a>上后显示图片

2 个答案: