Mehrere gleiche Hyperlinks auf einer Seite

juniorAdler · 17.10.2022

Hallo liebes Forum,

weiß vielleicht jemand wie ich den gleichen Link auf einer Seite, an verschieden Stellen, "gehovert" bekomme? Ich habe auf einer Seite einen Link an verschiedenen Stellen. Wenn ich über einen Link gehe, verändert er sich so wie ich es geschrieben habe. Die Links an den anderen Stellen jedoch ändern sich nicht. Weiß jemand wie ich es machen kann, dass sich alle Links gleichzeitig ändern, wenn ich nur über einen der Links gehe.

Danke für eure Antwort!

Sempervivum · 18.10.2022

Mir fällt leider keine Lösung nur mit CSS ein. Versuche es mit Javascript wie in dieser Demo:

Code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hover All</title>
    <style>
        a.hovered {
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <a href="seite1.html">Seite 1</a>
    <a href="seite2.html">Seite 2</a>
    <a href="seite1.html">Seite 1</a>
    <a href="seite1.html">Seite 1</a>
    <a href="seite2.html">Seite 2</a>
    <a href="seite1.html">Seite 1</a>

    <script>
        // Eventlistener für "mouseover" registrieren:
        window.addEventListener('mouseover', myHover);
        // Eventlistener für "mouseout" registrieren:
        window.addEventListener('mouseout', myHover);
        function myHover(event) {
            // Handelt es sich um ein a-Element?
            if (event.target.matches('a')) {
                const link = event.target.getAttribute('href');
                // Schleife über alle Elemente, die das selbe href-Attribut haben:
                document.querySelectorAll('a[href="' + link + '"]').forEach(item => {
                    // Wurde die Maus über das Element bewegt?
                    if (event.type == 'mouseover') {
                        // Klasse "hovered" hinzu fügen:
                        item.classList.add('hovered');
                    } else {
                        // Klasse "hovered" löschen:
                        item.classList.remove('hovered');
                    }
                });
            }
        }
    </script>
</body>

</html>