將圖像懸停在<a>標籤上後出現

-1

我目前正在使用按鈕和圖像。我已經看到了幾個教程，讓我們可以在鼠標懸停在圖像上後出現一個按鈕。我正試圖做這個操作的反面。我的問題：如何使用jquery將標記懸停在一個<a>標記之後，如何顯示圖片？可能嗎？將圖像懸停在<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>

來源

2012-09-22 techAddict82

如果有一個例子，是的，這是可能的。你試過什麼了？ – undefined

這個問題在一分鐘內有兩個upvotes？真的嗎？ – j08691

而在文件中的圖像是相對於'a'元素？它是否已經存在，還是動態創建的？ –

我認爲最好的辦法是使用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(); 
    } 
);

來源

2012-09-22 20:50:44

偉大的解決方案！我只是建議將第一個回調改爲$（「div＃images」）。children（「img＃」+ ID）.fadeIn（「slow」）。siblings（）。hide（）;因此，如果快速鼠標移動懸停鏈接，則沒有機會同時看到多個圖像。 – cacoroto

@cacoroto我同意快速移動鼠標可能會導致屏幕上出現多個圖像，但我認爲你的解決方案並不奏效（嘗試過），因爲「漸隱」效果仍在發生。爲了解決這個問題，我們可以使用'stop'。我更新了我的帖子並編輯了小提琴。 –

使用jQuery的懸停方法，它是這樣工作的：

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

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

來源

2012-09-22 20:31:25 Kristian

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

來源

2012-09-22 20:31:26 Ozerich

難道他不想在mouseenter上隱藏圖像，然後在mouseleave上顯示它？只要切換'hide（）'和'show（）'語句即可。 – Hollister

只能使用CSS，如果你需要改變的img到您的標籤

.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 + ')'); 
     } 
    );

來源

2012-09-22 20:35:25

作者想解決問題使用jQuery，沒有CSS – Ozerich

這可以在jQuery中完成，看我的更新 –

_Every_解決方案在這裏使用CSS。即使'.show（）'和'.hide（）'只需切換'display：none' – Hollister

將圖像懸停在<a>標籤上後出現

回答

相關問題