當懸停在另一個表中的列時，如何顯示或隱藏一個表中的列？

我正在制作一個顯示選舉結果的網頁，我希望它在懸停百分比時從原始投票地圖切換到百分比地圖，對同一個鍵使用不同的值。請注意，更換地圖是一個完全獨立的問題，但現在我想更換關鍵標簽。目前相關代碼為：

<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>

我需要做的是，默認情況下，“pctkey”類是隱藏的，但是當游標在“percent”類中的任何內容上時，會顯示“pctkey”類并且“count”類是隱。我該怎么做呢？我已經有一個用于顯示地圖的 Javascript 頁面，所以我并不是專門尋找 CSS 選項。

我嘗試在 CSS 檔案中使用“.percent:hover .pctkey”，如各種指南所示，但沒有任何反應。

uj5u.com熱心網友回復：

我假設在.pctkeycss 類中，您已經創建了displayproperty none。然后你可以撰寫Js如下代碼：

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"
 }

之后，在每個td具有類的元素中percent添加這兩個事件偵聽器onmouseenter和onmouseleave事件：

onmouseenter="hideCount()"和 onmouseleave="hidePct()"。

請注意，也許#resultstable 有非零cellspacing，這將在單元格周圍添加一些空間并破壞td列的 s 之間的完整性。

您可以使用以下方法洗掉空間（如果需要）：

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

標籤：javascript html css

上一篇：將陣列轉換為鍵值對物件

下一篇：格式化JSON，使用vanillajs按鍵組排序