Trigger a hover effect while hovering on another div
<p>At the moment, I am learning how to write in javascript and jquery.I wrote a simple jquery code where when you hover one div, a second div will be hovered too. However, the code I wrote is not working. My knowledge is not enough to fix the mistake I made by myself that's why if someone can help me I am going to be really grateful. </p>

<p>PS: I know that it can be done only with CSS but I am not interested in that.</p>

<p>My code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.Box1').mouseover(function(e) {
    $('.Box2').trigger(e.type);
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="Box1"&gt;&lt;/div&gt;
&lt;div class="Box2"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>