在另一个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中，当您将鼠标悬停在该框上时，请删除该类。 该代码如下所示：

工作演示

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

Answer 2

您的代码确实触发了Box2的mouseover事件-您可以通过添加处理程序进行测试：

$('.Box2').mouseover(function() {console.log('hello')})

但是，这不会激活Box2的css：hover属性（如果已定义）。 您可能需要为Box2的mouseover事件编写一个处理程序，以处理css属性。