如果我通过javascript设置不透明度，CSS悬停事件将被取消

CSS hover event is cancelled if I set opacity by javascript

本文关键字：悬停 CSS 事件 取消 不透明度 javascript 设置 如果      更新时间：2023-09-26

我试图制作一个图像渐变效果，我设置了jQuery animate方法来实现渐变效果，但我发现我在CSS中注册的悬停事件已经取消。

我觉得这很奇怪，这个方法不应该影响我的悬停效果。

虽然我可以通过javascript重新注册悬停事件，但它正在做的其他任务

我有什么误解吗？

附言：我尽量不使用CSS3动画。

JS部分：

$('img').animate({
    'opacity': '0.5'
}, 1500);

CSS部分：

img {
   opacity: 0;
}
img:hover {
   opacity: 1;
}

http://jsfiddle.net/aSRMR/

在css中使用!important可以解决问题

img:hover {
opacity: 1 !important;
}

工作Fiddle

您可以使用悬停。

$('img').hover( function (){
    console.log('hovered in');
}, function (){
    console.log('hovered out');
}

在制作动画之前，不要忘记放置stop（）。

所以尝试你的代码会是这样的。

$('img').hover( function (){
    console.log('hovered in');
    $('img').stop().animate({'opacity': '1'}, 1500);
}, function (){
    console.log('hovered out');
    $('img').stop().animate({'opacity': '0.5'}, 1500);
}

另一个解决方案，如果你想使用CSS方法，可以这样做。

$('img').hover( function (){
    $('img').addClass('hovered');
}, function (){
    $('img').removeClass('hovered');
}

在你的CSS上。

img {
   opacity: 0;
}
.hovered {
   opacity: 1;
}

您是否也考虑过使用CSS Webkit进行淡入淡出？

相关文章：