JQuery悬停效应问题
JQuery悬停效应问题
提问于 2016-05-27 08:33:14
在我开始我的JS之前，知识不是最好的！不过，我已经试过尝试一下了！基本上，我有三张图片叠在一起，如果我把它们每一张都悬停，剩下的两张都会消失--除了这个，每一幅图像都有一些文本，文本也是一样的，所以如果你在与文本相结合的那一层上悬停，它就会淡出另外两张。这直到你说鼠标从最后一个悬停的图像中出来，并且它停留在它的动画状态，并没有恢复正常。
<img class="image-grass top" src="<?php bloginfo('template_url'); ?>/assets/images/top-grass-layer.png" />
<img class="image-grass middle" src="<?php bloginfo('template_url'); ?>/assets/images/middle-grass-layer.png" />
<img class="image-grass bottom" src="<?php bloginfo('template_url'); ?>/assets/images/bottom-grass-layer.png" />
<p class="layer-one-text">Roll out the artificial grass and fix around the perimeter with turf pins.</p>
<p class="layer-two-text">Lay out the Sportsbase panels and interlock them together to form a continuous platform. The panels are manufactured from recycled plastic and the hollow design provides cushioning for comfort and drainage for water removal.</p>
<p class="layer-three-text">Select a flat area of grass, earth, concrete or Tarmac. Fill any obvious hollows with sand.</p> $('.top, .layer-one-text').mouseenter( function() {
$('.middle, .layer-two-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
$('.top, layer-one-text').mouseleave( function(){
$('.middle, .layer-two-text, .bottom, .layer-three-text').animate({ opacity: 1 });
})
})
$('.middle, .layer-two-text').mouseenter( function() {
$('.top, .layer-one-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
$('.middle, .layer-two-text').mouseleave( function(){
$('.top, .layer-one-text, .bottom, .layer-three-text').animate({ opacity: 1 });
})
})
$('.bottom, .layer-three-text').mouseenter( function() {
$('.middle, .layer-two-text, .top, .layer-one-text').stop(true, true).animate({ opacity: 0.3 });
$('.bottom').mouseleave( function(){
$('.middle, .layer-two-text .top, .layer-one-text').animate({ opacity: 1 });
})
})这里有一个图片来说明我的最终目标：
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-05-27 08:46:14
每次在图像上徘徊时，您都在创建mouseleave事件侦听器：
我想这就是你想要的：https://jsfiddle.net/eosrphsa/
另外，最后一个jQuery选择器只是$('.bottom').mouseleave，我认为您需要$('.bottom, .layer-three-text').。
Stack Overflow用户
发布于 2016-05-27 08:42:35
我认为--不需要做任何修改--您应该像这样撤销mouseenter：
$('.top, .layer-one-text').mouseenter( function() {
$('.middle, .layer-two-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
})
}).mouseleave(function() {
$('.middle, .layer-two-text, .bottom, .layer-three-text').animate({ opacity: 1 });
});在元素上时，您正在触发mouseleave函数，这是没有意义的。
这个函数还有.bottom，.layer-three-text元素来动画。这是正确的吗？
Stack Overflow用户
发布于 2016-05-27 08:43:12
尝试使用.on('hover', function(){})而不是.mouseenter。使用mouseenter，您必须具体地编写mouseout代码，这将导致这里的问题。随着悬停，这个问题应该得到解决。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37478654
复制相关文章
相似问题
腾讯云开发者
