javascript - 悬停在另一个 div 上时触发悬停效果

Question

目前，我正在学习如何用 javascript 和 jquery 编写。我编写了一个简单的 jquery 代码，当您悬停一个 div 时，第二个 div 也会悬停。但是，我写的代码不起作用。我的知识不足以纠正我自己所犯的错误，这就是为什么如果有人可以帮助我，我将非常感激。

PS:我知道这只能用 CSS 来完成，但我对此不感兴趣。

我的代码:

$('.Box1').mouseover(function(e) {
    $('.Box2').trigger(e.type);
})

body{
  margin:0;
  padding:0;
  background-color:green;
}

.Box1{
  position:relative;
  width:100vw;
  height:10vh;
  transition: background-color 1s ease;
}

.Box1:hover{
  background-color:#FFF;
}

.Box2{
  position:absolute;
  top:10vh;
  width:100vw;
  height:20vw;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Box1"></div>
<div class="Box2"></div>

Answer 1

您只需要“伪造”一个悬停事件即可。获取您附加到 .Box2:hover css 的任何代码并将其分配给一个类。当您将鼠标悬停在 .Box1 上时，将类添加到 .Box2 上，当您将鼠标悬停在 .Box1 上时，删除该类。代码如下所示:

<强> Working Demo

CSS

.Box2{
  position:absolute;
  top:10vh;
  width:100vw;
  height:20vw;
  background-color:red;
  transition: background-color 1s ease;
}

.Box2:hover, .Box2.hovered {
  background-color: #FFF;
}

jQuery

$(function () {
  $('.Box1').mouseover(function(e) {
    $('.Box2').addClass("hovered");
  });
  $(".Box1").mouseout(function () {
    $(".Box2").removeClass("hovered");
  });

  // or optionally using .hover() for in/out handling as per A. Wolff's comment
  $(".Box1").hover(function () {
    $(".Box2").addClass("hovered");
  }, function () {
    $(".Box2").removeClass("hovered");
  });
});