Zeile hervorheben bei Grid?

VeryPrivat · 25. April 2020

Die Funktionalität, die in Zelle in Tabelle hervorheben "gezeigt" wurde- also die Zeile hervorheben, wenn man drüber fährt finde ich toll. Leider habe ich vor einiger Zeit meine Tabellen in Grid umgewandelt, da der Onlinevalidator gemeckert hat. Ich wollte daher fragen, ob es in einem Grid auch möglich ist die Zeile über die man gerade fährt hervorzuheben.

Hier ein kleiner Auszug des Codes zur Veranschaulichung.

HTML

<link rel="stylesheet" href="html5.css">  <!--MUSS AN ERSTER STELLE STEHEN (ESP spezifisch!)-->
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<style>
.grid-funk {
    display:grid; /*Tabellendarstellung*/
    grid-gap:5px; /*Breite der TabellenInnenlinien)*/
    background-color:#2AF; /*Farbe der Tabelle: Blau*/
    padding:5px; /*Rahmenbreite Tabelle außen*/
}
.grid-funk {
    grid-template-columns:auto 23% 23%; /*Spaltenbreite: Rest, 1/4, 1/4*/
    grid-template-rows:auto; /*Spaltenhöhe (auto=Standard)*/
}
</style>

<title>GridHoverTest</title>
<body>
<div class="grid-funk">
    <div>Internet</div>
    <div class="CellBtn"><a class="btnLnkOn" href="cmd?type=funk&file=funk.cfg&ID=InetAn">AN</a></div>
    <div class="CellBtn"><a class="btnLnkOff" href="cmd?type=funk&file=funk.cfg&ID=InetAus">AUS</a></div>
    <div>Verst&auml;rker</div>
    <div class="CellBtn"><a class="btnLnkOn" href="cmd?type=funk&file=funk.cfg&ID=AnlAn">AN</a></div>
    <div class="CellBtn"><a class="btnLnkOff" href="cmd?type=funk&file=funk.cfg&ID=AnlAus">AUS</a></div>
</div>
</body>
</html>

Alles anzeigen

Das Problem ist, dass ich keine Möglichkeit weiß, wie ich dem Grid sage was eine Reihe ist - sobald ich ein <span> oder <div> drüber ziehe wird die Zeile in eine Zelle geschrieben.

Ich konnte auch im Internet nichts entsprechendes finde.

Sempervivum · 25. April 2020

"Ich konnte auch im Internet nichts entsprechendes finde." Ich leider auch nicht, mir ist nur eine Lösung mit Javascript eingefallen:

Code

    <script>
        const cells = document.querySelectorAll('div.grid-funk > div');
        cells.forEach((item, idx) => {
            const iRow = parseInt(idx / 3),
                theClass = 'row-' + iRow;
            item.classList.add(theClass);
            item.addEventListener('mouseover', () => {
                document.querySelectorAll('div.grid-funk > div.' + theClass).forEach((item, idx) => {
                    item.classList.add('hovered');
                });
            });
            item.addEventListener('mouseout', () => {
                document.querySelectorAll('div.grid-funk > div.' + theClass).forEach((item, idx) => {
                    item.classList.remove('hovered');
                });
            });
        });
    </script>

Alles anzeigen

CSS:

Code

    .grid-funk>div.hovered {
        background-color: lightgray;
    }

Zeile hervorheben bei Grid?

Jetzt mitmachen!

Teilen

Tags