jQuery 特定の場所にhoverしたら、指定箇所に画像を表示させる

特定の場所をhover（click）したら、指定の箇所に画像を表示させる（下記の参考はワードプレス用になっていますが、htmlでも同じです。）

html

<!--  ここにカーソルをhover-->
<p class="studio">
  <a class="studio_map_img" href="<?php the_permalink(); ?>" data-img="<?php the_field('studio-floor_map'); ?>"><?php the_title(); ?></a>
</p>  

<!--  ここに画像を排出-->
<img class="studio_main_img" src="http://localhost/sound_city/wp-content/uploads/2022/10/map_ed1.png" alt="">

jQuery

<script>
//   
$(".studio_map_img").hover(function(){

   $(".studio_main_img").attr("src",$(this).attr("data-img"))

});
</script>