[gaby]

Hallo,

Ich suche eine JS-Lösung (kein Jquery) für folgendes Szenario:

Bei hover über einem der Hauptlinks soll dieser einen Hover-Effekt bekommen, und gleichzeitig ALLE anderen Hauptlinks eine Halbtransparenz.
Wenn die Maus zwischen den Links steht, soll kein Link transparent sein.

Das Problem ist mit reinem CSS nur bedingt lösbar, denn der Geschwister-Selektor selektiert ja nur die im Quellcode nachfolgenden, nicht aber auch noch die vorangehenden Elemente.

Bsp-Datei:
general siebling

Ich habe es jetzt erstmal so gelassen, und dann mit JS nur ergänzt, daß bei 'hover' auch die vorangehenden Links transparent werden.

testdatei

Es funktioniert nun, wie gewünscht, jedoch ist der JS-Code einfach nur grausam.

Wie müßte ich das JavaScript denn ändern, um das Ganze ein bißchen zu optimieren?
Jquery möchte ich nur für diesen Effekt eigentlich nicht verwenden.

Danke im Vorraus für eine Antwort.


Grüße
gaby

[protonenbeschleuniger]

PHP-Code:

<script>
+function() {
var element = document.getElementById('liste');
if(!element) return;
var list = [];
for(var i = 0, li = element.getElementsByTagName('li'); li[i];i++){
    if(li[i].className === 'main') {
        list.push(li[i]);
        li[i].onmouseover = function() {
            var _this = this;
            list.forEach( function(item) {
                if(item !== _this) {
                    item.style.backgroundColor = 'rgba(0, 255, 0, .2)';
                }
            });
        };
        li[i].onmouseout = function() {
            list.forEach( function(item) {item.style.backgroundColor = 'rgba(0, 255, 0, 1)';});
        };
    }
}
}();
</script> 


[gaby]

Vielen vielen Dank für den Code!
Das sieht doch jetzt schon viel ordentlicher aus.

Ich baue ihn nachher ein, bin gerade nach Hause gekommen.

Grüße
Gaby