Jquery CSS鼠標懸停動畫效果不佳

我已經使用jQuery轉換了Flash廣告。一切工作正常，但我的鼠標懸停動畫運行不順暢。在右下角有文字「細節」，當鼠標移過文字時，整個容器變黑。我添加了這樣的效果：Jquery CSS鼠標懸停動畫效果不佳

 $('#disclaimer').hover(
      function() { 
       $('#wrapper').addClass('hovered'); 
      }, function() { 
       $('#wrapper').removeClass('hovered'); 
      } 
     );

但它不能正常工作;有時會起作用，有時卻不起作用。如果我將鼠標移動到「詳細信息」的「D」字符上，則不起作用。我在這裏錯過了什麼？每當我將鼠標移動到「詳細信息」字符上時，我都希望此效果能夠順暢運行;它應該變黑。

有什麼建議？這是我的JsFiddle代碼。

來源

2014-07-06 user3754380

是[這個小提琴（http://jsfiddle.net/r3BTU/1 /）做你想做的事情？ – blex

請注意，小提琴中的'＃headline3Txt'元素沒有關閉 – adeneo

以及您的解決方案工作正常，但是當我將鼠標移到細節文本上時，它會變黑，並且當鼠標移動到容器中的任何位置時它仍然是黑色。我不希望這個我想容器只能轉黑色的鼠標是在詳細信息文本，一旦它從細節文本移動，那麼它應該正常 – user3754380

當你將鼠標懸停在#Disclaimer元素，可以設置幾個元素display:none;，包括這一個。

由於此元素消失，懸停事件不再處於活動狀態，因此最終會出現無限循環。爲了避免這種情況，請使用opacity:0;，這樣可以保留元素，但不可見。

此外，要避免#disclaimer移動，請將其設爲position:absolute;。

Here is the JS Fiddle

CSS

.hovered #Image_Car { opacity:0; } 
.hovered #ctaBtn { opacity:0; } 
.hovered #Image_logo img { opacity:0; } 
.hovered #headlineText { opacity:0; } 
.hovered #disclaimer { opacity:0; } 

#disclaimer { 
    /* ... */ 
    position:absolute; 
    top: 168px; 
    left: 235px; 
}

來源

2014-07-07 00:33:14 blex

我建議只使用CSS：hover屬性，對於像這樣的簡單樣式更改使用javascript沒有意義。

您遇到了與父元素的懸停功能沒有關聯的特定元素的問題，可以通過將規則添加到父級的CSS並從那裏開始工作來避免這種問題。

來源

2014-07-07 00:14:23 bryce

你可以給我一個例子請 – user3754380

這裏的問題是，當懸停是顯示詳細信息文本設置爲無，所以懸停出事件將派遣，刪除徘徊的類！

你可以通過這個不斷變化的聲明懸停部分解決這個問題，：

$('#disclaimer').mouseenter(
      function (e) { 
       $('#wrapper').addClass('hovered') 
       .mouseleave(function() { 
        $('#wrapper').removeClass('hovered'); 
       }) 
      });

所以細節將當鼠標離開股利消失了，你也可以改變鼠標離開到鼠標移動，如果你希望它消失只是在移動。

下面是結果http://jsfiddle.net/r3BTU/2/

來源

2014-07-07 00:20:43 ngleich

是的，我只需要在移動它現在它變成黑色，它應該正常的，如果鼠標移動的細節文本 – user3754380

您的解決方案是將容器變黑，但當鼠標移開細節文本，然後它應該轉到正常，這是不發生的，鼠標移動到容器內，然後它仍然是黑色的 – user3754380

您可以設置到類（一個隱藏和可見），並與JS類之間的切換。。

var movingElement = document.getElementById("messageDiv"); 
var disclaimer = document.getElementById("disclaimer"); 
disclaimer.onmouseover= function(){  
    movingElement.className="class2";  
}; 
disclaimer.onmouseout= function(){  
    movingElement.className="class1"; 
};

您可以在CSS中添加trasitions所以可見類「消失」這裏有一個演示： http://jsfiddle.net/Nillervision/eSbzg/

來源

2014-07-07 00:41:33 Nillervision

Jquery CSS鼠標懸停動畫效果不佳

回答

相關問題