如何触发多个悬停动作/事件？

Question

我在这里有5个盒子，当我从一端悬停到另一端时，盒子会改变颜色，过渡延迟为6s，因此动画很慢。

如何触发多个悬停事件，

也就是说，当我将鼠标移到div上时，它应该触发其悬停事件。

示例：当我从左向右移动鼠标时，所有div的悬停事件都应运行。

在我的代码中，第一个悬停效果被触发，然后等待事件结束，然后在指针下面的其他div上开始下一个悬停效果。

 .box{ display: inline-block; height: 50px; width: 50px; background-color: #000; color: #fff; -webkit-transition: .6s 0s; text-align:center; } #box-1:hover{background-color: #C8F608;} #box-2:hover{background-color: #23DC07;} #box-3:hover{background-color: #07D7D7;} #box-4:hover{background-color: #076BD7;} #box-5:hover{background-color: #1307D7;} 

 <div class="container"> <div class="box" id="box-1">bx1</div> <div class="box" id="box-2">bx2</div> <div class="box" id="box-3">bx3</div> <div class="box" id="box-4">bx4</div> <div class="box" id="box-5">bx5</div> </div> 

这是我的jsfiddle

感谢您的任何帮助 ：）

Answer 1

:hover指示的background-color在您离开元素时不再适用。 因此，该元素将返回到其未悬停状态。 仅依靠:hover不能阻止这种情况的发生。

相反，您可以在悬停时添加一个类，以便保持效果。

演示 ： http : //jsfiddle.net/LYT8J/3/

的CSS

#box-1:hover, #box-1.hovered {background-color: #C8F608;}
#box-2:hover, #box-2.hovered {background-color: #23DC07;}
#box-3:hover, #box-3.hovered {background-color: #07D7D7;}
#box-4:hover, #box-4.hovered {background-color: #076BD7;}
#box-5:hover, #box-5.hovered {background-color: #1307D7;}

的JavaScript

$('.box').mouseover(function() {
    $(this).addClass('hovered');
});
$('.container').mouseleave(function() {
    $(this).find('.hovered').removeClass('hovered');
});

Answer 2

您希望所有div标签在悬停在一个上时触发悬停效果，对吗？

如果是这种情况，您可以使用jQuery解决此问题。

$(document).ready(function() {
  $("div[id^='box-']").mouseenter(function() {
    $("#box-1").css("background-color", "#C8F608");
    $("#box-2").css("background-color", "#23DC07");
    $("#box-3").css("background-color", "#07D7D7");
    $("#box-4").css("background-color", "#076BD7");
    $("#box-5").css("background-color", "#1307D7");
  });

  $("div[id^='box-']").mouseleave(function() {
    $("#box-1").css("background-color", "#EEEEEE");
    $("#box-2").css("background-color", "#EEEEEE");
    $("#box-3").css("background-color", "#EEEEEE");
    $("#box-4").css("background-color", "#EEEEEE");
    $("#box-5").css("background-color", "#EEEEEE");
  });
});

这应该做您想要的。 当您输入id以box-开头的任何div标签时box-它将触发此mouseenter事件以分别更改每个div的background-color 。 mouseleave事件会将background-color恢复为其原始的background-color 。 您没有列出原始颜色，所以我只是说#EEEEEE为浅灰色。