他のdivにホバーしながらホバー効果をトリガーする

Question

現在、私はjavascriptとjqueryで書く方法を学んでいます。単純なjqueryコードを書いて、1つのdivに移動すると2つ目の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に追加します。マウスを離してクラスを削除します。コードは次のようになります。

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

Answer 2

あなたのコードはBox2のためのmouseoverイベントをトリガしません - あなたはでこれをテストすることができますハンドラを追加：

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

ただし、Box2（定義されている場合）のcss：hoverプロパティは有効になりません。おそらく、cssプロパティを操作するBox2のmouseoverイベントのハンドラを記述する必要があります。