Question

我这里有5个盒子，当我从一端盘旋到另一端时，盒子会改变颜色，转换延迟是6s因此动画很慢。

如何触发多个悬停事件

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

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

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

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

这是我的jsfiddle

感谢您的帮助：）

Answer 1

当您离开元素时，background-color中指示的:hover不再适用。因此该元素将回到其未被发现的状态。仅依赖: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");
  });
});

这应该做你想要的。当您输入以div开头的id个box-标记时，它会触发此mouseenter个事件，以便单独更改每个background-color的{{1}} 。 div事件会将背景颜色恢复为原始mouseleave。你没有列出原始颜色，所以我只是说background-color为浅灰色。

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

2 个答案: