Wie hebe ich Zeilen und Spalten in einer Tabelle beim Hover mithilfe von CSS hervor?

Zeilen und Spalten in einer Tabelle beim Hover mit CSS hervorheben

Bei dieser Frage möchte der Benutzer sowohl eine Zeile als auch eine Spalte hervorheben Bewegen Sie den Mauszeiger über eine HTML-Tabelle. Sie möchten, dass sich die Hervorhebung von einer Achse zur anderen erstreckt und sich an der schwebenden Zelle schneidet.

CSS-Lösung

Hier ist eine reine CSS-Lösung, die den gewünschten Effekt erzielt:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

Erklärung

Dieses CSS verwendet eine Kombination aus Pseudoelementen, absoluter Positionierung und Z-Indizierung, um den gewünschten Effekt zu erzielen.

• Die Pseudoelemente ::before und ::after erstellen unsichtbare Boxen vor und nach den Zielelementen (Zeilen und Spalten).
• Durch die absolute Positionierung können diese Boxen über die Grenzen ihrer übergeordneten Elemente hinausragen .
• Durch die Einstellung des Z-Index auf -1 wird sichergestellt, dass sich diese Felder unter den tatsächlichen Tabellenzellen befinden, sodass sie die Benutzerinteraktionen nicht beeinträchtigen.

HTML

Das entsprechende HTML-Markup lautet wie folgt:

In diesem Markup werden die Klassen .row und .col zu den Tabellenkopfelementen hinzugefügt, um sie von regulären Zeilen und Spalten zu unterscheiden für unterschiedliche Stile, falls gewünscht.

Diese Lösung bietet einen flexiblen Ansatz zum Hervorheben von Tabellenzeilen und -spalten beim Hover, ohne dass JavaScript oder externe Bibliotheken erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie hebe ich Zeilen und Spalten in einer Tabelle beim Hover mithilfe von CSS hervor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!