HTML Table Mouse Hover to last Marge Column

enter image description hereI have a table with mouse hover effect, where last column is merged. Below is my code:

<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 6px;
        }
    </style>
    <style style="text/css">
    .hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
.hoverTable tr:nth-child(-n+50):hover td:nth-child(-n+2)
    {
          background-color: #ffff99;
    }
</style>

<body style="text-align:center">

    <h1 style="color:green;">
        Mouse Hover
    </h1>
    
    <h2>Requirement is When I hover to Canada, Color only Canada not Gloria Jean's Coffees and Coffee</h2>

    <table align="center"  class="hoverTable">
        <tr>
            <th>Name</th>
            <th>Item</th>
            <th>Location</th>
        </tr>
        <tr>
            <td>Gloria Jean's Coffees</td>
            <td>Coffee</td>

            <td rowspan="3" class="highlight" data-cell="c5">Canada</td>
        </tr>
        <tr>
            <td >North End Coffee Roasters</td>
            <td>Bagel</td>
        </tr>
        <tr>
            <td >Secret recipe</td>
            <td>Cheess Cake</td>
        </tr>
    </table>
</body>
</html>

When I hover a particular row, hover effect works properly. But when I hover to the last merged column, hover effect work for 1st row also. I want that, when I hover to the last merged column, hover effect only work on that particular merged column, not 1st row.

Solution

as per comment, here i use small jquery code also,

use hover function of jquery and other row use css hover with css :not property. try like below,

 $(document).ready(function(){
        $('.nothighlight').hover(
                
                function () {
                    $('.nothighlight').css('background','#ffff99');
                }, 
                 
                function () {
                    $('.nothighlight').css('background','#ffffff');
                }
             ); 
    });

table,th,td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 6px;
}

.hoverTable{
    width:100%; 
    border-collapse:collapse; 
}
.hoverTable td{
    padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:hover td:not(:last-child):not(.nothighlight)
{
     background-color: #ffff99;
}
.highlight:hover
{ 
    background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <body style="text-align:center">

   <table align="center"  class="hoverTable">
    <tr>
        <th>Name</th>
        <th>Item</th>
        <th>Location</th>
    </tr>
    <tr>
        <td class="nothighlight">Gloria Jean's Coffees</td>
        <td class="nothighlight">Coffee</td>

        <td rowspan="3" class="highlight" >Canada</td>
    </tr>
    <tr>
        <td >North End Coffee Roasters</td>
        <td>Bagel</td>
        <td style="display: none;"></td>
    </tr>
    <tr>
        <td >Secret recipe</td>
        <td>Cheess Cake</td>
        <td style="display: none;"></td>
    </tr>
</table>
</body>