Mehrere gleiche Hyperlinks auf einer Seite

Diskutiere Mehrere gleiche Hyperlinks auf einer Seite im CSS Forum im Bereich Programmierung; Hallo liebes Forum, weiß vielleicht jemand wie ich den gleichen Link auf einer Seite, an verschieden Stellen, "gehovert" bekomme? Ich habe auf...
J

juniorAdler

New member
Beiträge
1
Punkte Reaktionen
0
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!
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
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>
 
Zuletzt bearbeitet:
Thema:

Mehrere gleiche Hyperlinks auf einer Seite

Oben Unten