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

Question

我正在尝试制作一个价格表，显示在该服务期间将使用图像的区域。到目前为止，我已经设法展示了与悬停的服务相关的图像。只有图像不再显示，直到不再悬停文本。但它应该在悬停时立即显示。

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

HTML（短版）：

<div class="table-container">
            <table class="laseronth-tbl ">
                <thead>
                    <tr>
                        <th class="lasronth-th">Onderlichaam</th>
                        <th class="lasronth-th">Prijs</th>
                        <th class="lasronth-th">Pakketprijs ( 6 + 2 gratis )</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="tr-hover" data-img="./laserontharing-img/vrouw/onderlichaam/bikini-buiten-slip.png">
                        <td>Bikini (buiten slip)</td>
                        <td>€ 60</td>
                        <td>€ 360</td>
                    </tr>
                    <tr class="tr-hover" data-img="./laserontharing-img/vrouw/onderlichaam/bikini-klein.png">
                        <td>Bikini klein </td>
                        <td>€ 70</td>
                        <td>€ 420</td>
                    </tr>
                    <tr class="tr-hover" data-img="./laserontharing-img/vrouw/onderlichaam/bikini-groot.png">
                        <td>Bikini groot (volledig)</td>
                        <td>€ 90</td>
                        <td>€ 540</td>
                    </tr>
                    <tr>
                        <td>Bilnaad</td>
                        <td>€ 120</td>
                        <td>€ 720</td>
                    </tr>
                    <tr>
                        <td>Onderbenen</td>
                        <td>€ 125</td>
                        <td>€ 750</td>
                    </tr>
                    <tr>
                        <td>Knieën</td>
                        <td>€ 50</td>
                        <td>€ 300</td>
                    </tr>
                    <tr>
                        <td>Bovenbenen</td>
                        <td>€ 130</td>
                        <td>€ 780</td>
                    </tr>
                    <tr>
                        <td>Zone bovenbenen</td>
                        <td>€ 65</td>
                        <td>€ 390</td>
                    </tr>
                    <tr>
                        <td>Volledige benen</td>
                        <td>€ 260</td>
                        <td>€ 1560</td>
                    </tr>
                    <tr>
                        <td>Voeten</td>
                        <td>€ 40</td>
                        <td>€ 240</td>
                    </tr>
                    <tr>
                        <td>Tenen</td>
                        <td>€ 25</td>
                        <td>€ 150</td>
                    </tr>
                </tbody>
            </table>
            <div class="image-container">
                <img class="laserontharing-img" id="vrouw-onderlichaam" src="./laserontharing-img/vrouw/onderlichaam/volledig.png" alt="Illustratie vrouw voor visuele laserontharing plaatsaanduiding">
            </div>
        </div>

脚本

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

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

Answer 1

.toggle 隐藏元素，可以在hover里面添加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")
    });
  });