在懸停上添加透明圖像上的另一圖像

-1

我有三個圖像。我想讓another image成爲我徘徊的人之一。當我滑過它時，它就會消失。我怎樣才能獲得這個？ jQuery的將是確定的，因此有可能增加一個動畫太:-)在懸停上添加透明圖像上的另一圖像

<ul> 
<li> 
    <a class="toggle" href="#g1"><img src="blahblah.jpg" /></a> 
    <a class="toggle" href="#g2"><img src="blahblah.jpg" /></a> 
    <a class="toggle" href="#g3"><img src="blahblah.jpg" /></a> 
</li>

來源

2013-10-04 MultiformeIngegno

我試圖設置圖像上懸停附近被控制每個圖像（如此重複三次），然後是負餘量。默認情況下顯示：無。然後用jquery .attr我設置我將可見性更改爲可見，然後隱藏在mouseleave上。問題是運行懸停功能的元素與要應用的元素不同。而且我不知道如何處理該問題..也許使用.find？但是，我如何將它與.attr結合？ – MultiformeIngegno

抱歉，我不知道，我清楚地理解你的問題，但我認爲這會幫助你。

<div id="dv1" style="position:relative"> 
<img id="img1" style="position:absolute" src="image1.jpg"> 
<img id="img2" src="image2.jpg" width="150"> 
</div> 
//make this div position relative and make images positions as absolute

看看這個例子

jsfiddle demo

來源

2013-10-04 20:32:05

GENIUS！奇蹟般有效！ – MultiformeIngegno

我想建議，其中在頁面中隱藏的元素被重用，當徘徊在元件的頂部動態定位的方法。

動畫可以使用jQuery隱藏元素

$('.toggle img').mouseover(function(){ 
// Get the current offset of the image 
var currentElementOffset=$(this).offset(); 

// set the current offset of the overlay image 
$(".overlay").css({ 
    top: currentElementOffset.top, 
    left: currentElementOffset.left 
}); 
$(".overlay").fadeIn(500);});

上和隱藏疊加，當鼠標離開

// Hide the overlay image when the mouse hovers out 
$('.overlay').mouseleave(function(){ 
    $(".overlay").fadeOut(500); 
});

Check this implementation

來源

2013-10-04 20:37:24

感謝您的回覆！當你在圖像之間快速傳遞時，它有一些問題，但它的工作原理！ :-) – MultiformeIngegno

在懸停上添加透明圖像上的另一圖像

回答

相關問題