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

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>

​

这是我的小提琴

(谢谢你的帮助:)

Answer 1

当您离开元素时，在:hover中指示的:hover不再适用。所以元素会回到它未悬浮的状态。如果仅依赖于:hover，则无法防止这种情况发生。

相反，您可以在悬停时添加一个类，这样效果将保持不变。

Demo：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");
  });
});

这应该能做你想做的。当您输入以div开头的id标记时，它将触发该mouseenter事件，以单独更改每个div的background-color。mouseleave事件将将背景色还原为原来的background-color。你没有列出原色，所以我只是说#EEEEEE是浅灰色。