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

如何解决javascript将鼠标悬停在TR上以在悬停时显示图像仅在悬停后显示

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

自从我在网站上工作以来已经有一段时间了，我有点生锈了。

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>

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

解决方法

.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")
    });
  });