div div懸停jquery不透明

我想使用fadeTo顯示一個特定的div。如果我將鼠標懸停在div1上，那麼spark1應該是可見的，並在鼠標消失時消失。div div懸停jquery不透明

但是，它在懸停時不會做任何事情，我也不知道爲什麼。

HTML

<div class="spark1"></div> 

<div class="div1">text</div>

CSS

.div1 { 
    width:300px; 
    height:300px; 
} 

.spark1 { 
    position:absolute; 
    width:27px; 
    height:27px; 
    margin-top:70px; 
    margin-left:395px; 
    background:url(../img/spark.png) no-repeat; 
}

$('.div1').hover(function(){ 
    $('.spark1').fadeTo(200, 0); 
});

EDIT（更新）

HTML

<div class="spark1"></div> 
<div class="div1"></div>

CSS

.div1 { 
width:300px; 
height:300px; 
background-color:#000000; 
} 

.spark1 { 
position:absolute; 
width:27px; 
height:27px; 
top:70px; 
left:395px; 
background-color:#ff0000; 
filter:alpha(opacity=0); opacity:0.0; 
}

  $('.project1').hover(function(){ 
       $('.spark1').fadeTo(200, 1); 
      }, 
      function(){ 
       $('.spark1').fadeTo(200, 0); 
      });

它仍然不會觸發，我不明白這一點。如果你使用了正確的

來源

2012-02-27 meneerfab

即是一個不完整的懸停功能。有關示例，請參閱jQuery文檔。 – 2012-02-27 15:23:53

它是完整的，但可能不是預期的。 – 2012-02-27 15:25:06

@Diodeus。有一個'.hover（handlerInOut（eventObject））'重載。 – 2012-02-27 15:25:59

你的代碼工作css班級名稱

DEMO

您定義了一個css類.spark { }，但在您的代碼中，您使用的類名是.spark1。
選擇一個或另一個。

來源

2012-02-27 15:24:17

。當我們將鼠標懸停在它上面時，它應該是可見的：P – footy 2012-02-27 15:31:24

是的，在我的代碼中是正確的，這只是一個例子，但是您使其逆轉爲 – meneerfab 2012-02-28 08:28:31

你應該在stop the animation之前的事件觸發前完成。試試這個

$('.div1').hover(function(){ 
    $('.spark').stop(true,true).fadeTo(200, 1); 
},function(){ 
    $('.spark').stop(true,true).fadeTo(200, 0); 
});

小提琴例如：http://jsfiddle.net/mK4m6/11/

來源

2012-02-27 15:28:28

。當我們把鼠標懸停在它上面時應該是可見的：P – footy 2012-02-27 15:34:02

我相信你可以做出這個改變.. :)無論如何更新... – 2012-02-27 15:35:55

你在你的懸停功能犯了一個錯誤。它有2個回調方法：

$(document).ready(function() { 
    $(".div1").hover(
     function(event) { 
      //hover in 
      $(".spark1").fadeTo(200,1); 
     }, 
     function(event) { 
      $(".spark1").fadeTo(200,0); 
     }); 
});

下面是一個工作腳本：

http://jsfiddle.net/U8rzJ/7/

來源

2012-02-27 15:28:40 footy

雖然我懷疑這種情況下要求兩個參數，.hover（）* can * have 1論據。它在文檔中：http://api.jquery.com/hover/#hover2 – 2012-02-27 15:30:52

@SurrealDreams是的，這種情況下需要兩個參數。但是，我也同意你的看法 – footy 2012-02-27 15:33:30

大廈迪迪埃的良好的類名稱的漁獲物，有一個與你的懸停（）腳本的問題。 hover（）可以將一個或兩個函數作爲參數 - 如果只提供一個函數，則會在mouseover和mouseout兩者上執行。你會想要這個，我認爲：

$('.div1').hover(function(){ 
    //fade in to 100% 
    $('.spark').fadeTo(200, 100); 
}, 
function(){ 

    $('.spark').fadeTo(200, 0); 
});

這會淡化mousein中的.spark，並在mouseout中將其淡出。如果你只想在mouseout上動畫，我會從.hover（）切換到.mouseout（）。

來源

2012-02-27 15:29:25

HTML

<div class="spark1"></div> 

<div class="div1">text</div>

CSS

.div1 { 
width:300px; 
height:300px; 
} 

.spark1 { 
position:absolute; 
width:27px; 
height:27px; 
top:70px; 
left:395px; 
background-color:#ff0000; 
filter:alpha(opacity=0); opacity:.0; 
}

jQuery的

$('.div1').hover(function(){ 
    $('.spark1').fadeTo(200, 1); 
}, 
function(){ 
    $('.spark1').fadeTo(200, 0); 
});

那麼這是可行的。 1.使用正確的類的名字 2.設置spark1的初始不透明度爲0 3.在的mouseenter褪色不透明度爲1 4.在鼠標離開褪色不透明度爲0

來源

2012-02-27 15:37:06

div div懸停jquery不透明

回答

相關問題