將鼠標懸停在<a>標簽上</a>后，使圖像出現

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，類或其他數據類型進行比較。 您也可以通過一門課程來做到這一點。

這是一個小提琴 。 這是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的hover方法，其工作方式如下：

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

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

Answer 3

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

Answer 4

如果需要將img更改為A標簽，則只能使用css

.img{
    background: #222 url(/images/alert-overlay.png);
}
.img_hover{
    background: #222 url(/images/alert-overlay-hover.png);
}

用jQuery

$('a.orange').hover(
    function() {

        $(this).removeClass('img').addClass('img_hover');
    },
    function() {
        $(this).removeClass('img_hover').addClass('img');
    }
);

或僅與jQuery

 $('a.orange').hover(
        function() {
            $(this).css('background-image', 'url(' + imageUrlHover + ')');
        },
        function() {
            $(this).css('background-image','url(' + imageUrl + ')');
        }
    );