javascript悬停在TR上以显示悬停时的图像仅在悬停后显示

我正试图制作一个价格表，用图像显示服务期间将要处理的区域。到目前为止，我已经成功地显示了与悬停的服务相关的图像。只有在不再悬停文本之前，图像才会显示。但它应该在悬停时立即显示

我已经有一段时间没有在网站上工作了，我有点生疏了

Html（简体版）：

奥德利查姆
普里斯
Pakketprijs（6+2免费）
比基尼
€ 60
€ 360
比基尼克莱因
€ 70
€ 420
比基尼groot（volledig）
€ 90
€ 540
比尔纳德
€ 120
€ 720
昂德伯恩
€ 125
€ 750
克尼恩
€ 50
€ 300
博文贝宁
€ 130
€ 780
波文贝宁区
€ 65
€ 390
沃勒迪格·贝宁
€ 260
€ 1560
沃顿
€ 40
€ 240
特南
€ 25
€ 150

剧本

<script type="text/javascript">
   $(function() {
    $(".tr-hover").hover(function(){
        $( "#vrouw-onderlichaam" ).attr("src", $(this).data("img"))
        $( "#vrouw-onderlichaam" ).toggle();
    });
  });
</script>

$（函数（）{
$（“.tr hover”）.hover（函数（）{
$（“#vrouw onderlicaam”）.attr（“src”，$（this.data（“img”））
$（“#vrouw onderlicaam”）.toggle（）；
});
});

有人知道它为什么会这样吗？ 另外，我有几个这样的表，它们有自己的映像容器，它们的行为应该是相同的。因此，任何帮助我提高效率的建议都是一个很好的学习机会。

---

提前谢谢

。切换隐藏元素，您可以在悬停中添加handlerout函数，以返回mouseleave上的主图像

 $(function() {
    $(".tr-hover").hover(function(){
        $( "#vrouw-onderlichaam" ).attr("src", $(this).data("img"))
    },function(){
        $( "#vrouw-onderlichaam" ).attr("src", "./laserontharing-img/vrouw/onderlichaam/volledig.png")
    });
  });

---

.toggle（）

在显示（如果当前隐藏）和隐藏（如果当前显示）之间切换元素。我怀疑您是否希望在此处交替执行这两项操作，这没有什么意义。我误解了toggle（）的功能。谢谢你的解释。我把toggle从脚本中删除了，现在它可以按照我想要的方式工作。我还不确定我是否想要这个流程，但这对将来的项目可能有用。谢谢你的洞察力！

 $(function() {
    $(".tr-hover").hover(function(){
        $( "#vrouw-onderlichaam" ).attr("src", $(this).data("img"))
    },function(){
        $( "#vrouw-onderlichaam" ).attr("src", "./laserontharing-img/vrouw/onderlichaam/volledig.png")
    });
  });