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鼠标悬停动画效果不佳

回答

相关问题