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

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.

CodePudding user response：

I assume that in .pctkey css class, you have made the display property none. Then you can write Js code like below:

function hideCount(){
     var countElements = document.querySelectorAll(".count");
     var pctElements = document.querySelectorAll(".pctkey");

     for(let i = 0; i<countElements.length; i  )
         countElements[i].style.display = "none"
        
     for(let j = 0; j<pctElements.length; j  )
         pctElements[j].style.display = "table-cell"
 }
    
 function hidePct(){
     var countElements = document.querySelectorAll(".count");
     var pctElements = document.querySelectorAll(".pctkey");

     for(let i = 0; i<countElements.length; i  )
         countElements[i].style.display = "table-cell"
        
     for(let j = 0; j<pctElements.length; j  )
         pctElements[j].style.display = "none"
 }

After that, in each one of td elements with percent class add these two event listeners for onmouseenter and onmouseleave events:

onmouseenter="hideCount()" and onmouseleave="hidePct()".

Note that, maybe #results table has non-zero cellspacing and this will add some space all around the cells and breaks the integrity between tds of a column.

You can remove the space (if you want) with:

#results{
    border-collapse: collapse; 
    border-spacing: 0;
}