Using jQuery to Change an Image

<script type="text/javascript">
<!--
jQuery(document).ready(function($){
   $("#div1").mouseenter(function(){
       $(".phone").removeClass("showphone");
       $(".image1").addClass("showphone");
   });
   $("#div2").mouseenter(function(){
       $(".phone").removeClass("showphone");
       $(".image2").addClass("showphone");
   });
   $("#div3").mouseenter(function(){
       $(".phone").removeClass("showphone");
       $(".image3").addClass("showphone");
   });
   $("#div4").mouseenter(function(){
       $(".phone").removeClass("showphone");
       $(".image4").addClass("showphone");
   });
});
//--></script>
<style>
.phone {
   display: none;
   position: absolute;
   top: 0;
   right: 0;
}
.phone.showphone {
   display: block;
}
#phone_container {
   position: relative;
   height: 650px;
   float: right;
   width: 75%;
   box-sizing: border-box;
}
.mydiv {
   border: 1px solid blue;
   font-size: 26px;
   margin-bottom: 10px;
   padding: 5px;
   border-radius: 3px;
   box-shadow: 5px 5px rgba(0, 0, 50, 0.3);
   width: 25%;
   float: left;
   box-sizing: border-box;
}
.mydiv:hover {
  cursor: pointer;
}
</style>

<p> This post is an example of how to change an image “in place” when the mouse is hovered over different areas. </p>
<!--more-->
<p>The image below should change as you move the mouse over the different &lt;div&gt;s. For each &lt;div&gt;, there is an event handler which captures the mouseenter event that assigns a&nbsp;<strong>showphone</strong>&nbsp;class to a specific image. The code can be seen at&nbsp;<a href="http://pastebin.com/86UmpPNa" target="_blank" rel="noreferrer noopener">this pastebin</a>.</p>

<div id="phone_container">
<img class="phone image1 showphone" src="http://inrgee.com/wp-content/uploads/2019/07/app_features_phone_1.png">
<img class="phone image2" src="http://inrgee.com/wp-content/uploads/2019/07/app_features_phone_2.png">
<img class="phone image3" src="http://inrgee.com/wp-content/uploads/2019/07/app_features_phone_3.png">
<img class="phone image4" src="http://inrgee.com/wp-content/uploads/2019/07/app_features_phone_4.png">
</div>
<div id="div1" class="mydiv">This is div1.</div>
<div id="div2" class="mydiv">This is div2.</div>
<div id="div3" class="mydiv">This is div3.</div>
<div id="div4" class="mydiv">This is div4.</div>