将 table 切换到移动视图后，超链接的悬停效果无法正常工作

Question

我有一个 table 有几个列，可以通过单击按钮切换到移动视图。一些字段包含超链接。

       <style>

           .show-thin {
            width: 930px;      /* complete width of alternative table view */
           }

            /* Force table to not be like tables anymore */
           .show-thin table, .show-thin thead, .show-thin tbody, .show-thin th, .show-thin td, .show-thin tr {
                    display: block;
            }

            /* Hide table headers (but not display: none;, for accessibility) */
           .show-thin thead tr {
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
            }

           .show-thin tr { border: 1px solid #ccc; }

           .show-thin td {
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eef;
                    position: relative;
                    padding-left: 30%;      /* distance of table-values from left margin 30px */
            }

           .show-thin td:before {
                    /* Now like a table header */
                    position: absolute;              /* puts field-names at left margin */
                    /* Top/left values mimic padding */
                    top: 6px;
                    left: 6px;
                    width: 45%;
                    padding-right: 10px;
                    white-space: nowrap;
            }

            /*
            Label the data
            */
           .show-thin td:before { content: attr(data-label); }

        </style>

        <script>

        function toggle() {
          var table = document.querySelector('.myTable');
          table.classList.toggle('show-thin');
        }

        </script>


        <button onclick="toggle()">Toggle</button>
        <hr/>
        <table class="myTable">
        <thead>
          <tr class="tr thin-hide">
            <th data-label='Nr'>Nr</th>
            <th>Estimated arrival date</th>
            <th>Amount</th>
            <th>Period</th>
            <th>Period2</th>
            <th>Period3</th>
            <th>Period4</th>
            <th>Period5</th>
            <th>Period6</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td data-label="Nr">1234</td>
            <td data-label="Estimated Arrival Date">03/15/2001</td>
            <td data-label="Amount">.00</td>
            <td data-label="Period"><a href='https://www.startpage.com' target='_blank'>Startpage</a></td>
            <td data-label="Period2"><a href='https://www.wikipedia.com' target='_blank'>Wikipedia</a></td>
            <td data-label="Period3"><a href='https://www.google.com' target='_blank'>Google</a></td>
            <td data-label="Period4">3rd</td>
            <td data-label="Period5">3rd</td>
            <td data-label="Period6">3rd</td>
          </tr>
          <tr class="tr">
            <td data-label="Account">1235</td>
            <td data-label="Estimated Arrival Date">04/21/2002</td>
            <td data-label="Amount">.00</td>
            <td data-label="Period">4th</td>
            <td data-label="Period2">4th</td>
            <td data-label="Period3">4th</td>
            <td data-label="Period4">4th</td>
            <td data-label="Period5">4th</td>
            <td data-label="Period6">4th</td>
          </tr>
          <tr>
            <td data-label="Account">4594</td>
            <td data-label="Estimated Arrival Date">11/11/2011</td>
            <td data-label="Amount">.50</td>
            <td data-label="Period">2nd</td>
            <td data-label="Period2">2nd</td>
            <td data-label="Period3">2nd</td>
            <td data-label="Period4">2nd</td>
            <td data-label="Period5">2nd</td>
            <td data-label="Period6">2nd</td>
          </tr>
          <tr>
            <td data-label="Account">4594</td>
            <td data-label="Estimated Arrival Date">11/11/2011</td>
            <td data-label="Amount">.50</td>
            <td data-label="Period">2nd</td>
            <td data-label="Period2">2nd</td>
            <td data-label="Period3">2nd</td>
            <td data-label="Period4">2nd</td>
            <td data-label="Period5">2nd</td>
            <td data-label="Period6">2nd</td>
          </tr>
          </tbody>
        </table>

在桌面模式下，超链接的悬停效果正常。切换到移动视图后，超链接的悬停效果仅在相应单词的最上边缘起作用。

我认为问题出在 CSS，但是，我没有让它正常工作。

Answer 1

在移动模式下，第一列与第二列重叠。将 background-color: green 添加到 .show-thin td:before {...}，您会看到它发生。因此，第一列太宽了。

将 .show-thin td:before {...} 中的 width 更改为 28% 或更少，您的问题就解决了....

将 table 切换到移动视图后，超链接的悬停效果无法正常工作

Hover effect on hyperlink not working properly after switching table into mobile view

html

css

hyperlink

mousehover