javascript hover over TR to show image on hover only shows after hover

Question

I'm trying to make a price table that shows the area that will be worked on during that service with an image. So far I've managed to show the image that relates to the service that is hovered on. Only the image doesn't show until not hovering the text any more. But it is supposed to show immediately when being hovered.

It has been a while since I worked on a website and I'm getting a little rusty.

Html (short version):

<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

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

Does anyone see why it behaves like this? Also, I have several of these tables that have their own image container that should behave in the same way. So any advice to help me make it more efficient would be a very good learning opportunity. Thanks in advance!

Answer 1

.toggle hide the element, you can add the handlerout function inside the hover, to go back to the main image on mouseleave.

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