How do I show or hide a column in one table when a column in another table is being hovered over?

I’m working on a webpage showing election results, and I want it to switch from a raw vote map to a percentage map when a percentage is hovered over, using different values for the same key. Changing out the maps is an entirely separate issue, mind, but right now I want to switch out the key labels. The relevant code is currently:

<div id='towninfo'>
    <div id='candidates'>
    <table id='results'>
        <tr>
            <th>Candidate</th>
            <th colspan='2'>Votes</th>
        </tr>
        <tr style='font-weight: bold'>
            <td class='cand' id='cand1'>Candidate 1 &#10004;</td>
            <td class='votes' id='votes1'>100</td>
            <td class='percent' id='pct1'>50%</td>
        </tr>
        <tr>
            <td class='cand' id='cand2'>Candidate 2</td>
            <td class='votes' id='votes2'>60</td>
            <td class='percent' id='pct2'>30%</td>
        </tr>
        <tr>
            <td class='cand' id='cand3'>Candidate 3</td>
            <td class='votes' id='votes3'>40</td>
            <td class='percent' id='pct3'>20%</td>
        </tr>
    </table>
    </div>
</div>
<div id='key'>
    <table>
        <tr>
            <th>Color</th>
            <th class='count'>Votes</th>
            <th class='pctkey'>Percent</th>
        </tr>
        <tr>
            <td class='color' style='background-color: rgb(91, 89, 84);'></td>
            <td class='count'>41-50</td>
            <td class='pctkey'>100%</td>
        </tr>
        <tr>
            <td class='color' style='background-color: rgb(120, 114, 99);'></td>
            <td class='count'>31-40</td>
            <td class='pctkey'>75-100%</td>
        </tr>
        <tr>
            <td class='color' style='background-color: rgb(164, 151, 122);'></td>
            <td class='count'>21-30</td>
            <td class='pctkey'>50-75%</td>
        </tr>
        <tr>
            <td class='color' style='background-color: rgb(200, 186, 153);'></td>
            <td class='count'>11-20</td>
            <td class='pctkey'>25-50%</td>
        </tr>
        <tr>
            <td class='color' style='background-color: rgb(223, 216, 197);'></td>
            <td class='count'>1-10</td>
            <td class='pctkey'>0-25%</td>
        </tr>
        <tr>
            <td class='color' style='background-color: rgb(255, 255, 255);'></td>
            <td class='count'>0</td>
            <td class='pctkey'>0%</td>
        </tr>
    </table>
</div>

What I need to do is make it so that, by default, the ‘pctkey’ class is hidden, but when the cursor is over anything in the ‘percent’ class, the ‘pctkey’ class is shown and the ‘count’ class is hidden. How do I do this? I already have a Javascript page for displaying the map, so I’m not specifically looking for a CSS option.

I tried using “.percent:hover + .pctkey” in the CSS file like various guides have shown, but nothing happens.