Hover Effekt nach JS funktioniert nicht

[Emanuel]

Hallo Leute!

Folgendes Problem:
Hab eine Tabelle und jede row mit einem hover Effekt versehen:

tr.info_tr{
background:#EEF1DF;
}

tr.info_tr:hover{
background:white;
}
<table>
<tr class="info_tr">
...
</tr>
</table>

Das Funktioniert soweit.
Zusätzlich gibts die Möglichkeit jede row einzeln per checkbox zu markieren, wodurch sich per JS die Farbe der row ändert.
Nun, nachdem eine row markiert ist (egal welche) ist der hover Effekt bei keiner row mehr wirksam.

Wieos ist das so?

MfG Emanuel

[Emanuel]

Nochmal ich, habs mir grad selber beantwortet.

Da ich in der JS Funktion der row den Wert style="background:...;" zuweise, ist der hover Effekt nicht mehr möglich (wegen "Hierarchie" der style definitionen)

Ok, gäbe es noch eine andere Möglichkeit einen hover Effekt zu erzielen, ausser mit den Eventhandlern 'onmouseover' und 'onmouseout'?

[Emanuel]

...nochmal ich...

Tut mir leid, das ist ja schon spam, aber ich bin grad wieder auf eine nettere Lösung gekommen.

Ich weise ganz einfach in der JS Funktion, je nachdem ob die row markiert ist oder nicht einen anderen Klassennamen zu mit '.className' und definier einfach noch eine zusätzliche Klasse.

Hat sich also erledigt!

[Felix Riesterer]

Lieber Emanuel,

was hindert Dich, per JS eine neue/weitere CSS-Klasse zuzuweisen? Ich denke das in etwa so:

window.aendereMarkierung = function(element, neueKlasse) {  
    var cssKlasse = element.className;  
    var muster = new RegExp('\b' + neueKlasse + '\b', 'i');  
  
    if (!cssKlasse) {  
        // Element hatte noch kein class-Attribut!  
        cssKlasse = "";  
    }  
  
    if (cssKlasse.match(muster)) {  
        // CSS-Klasse bereits vorhanden -> entfernen!  
        cssKlasse = cssKlasse.replace(muster, '');  
    } else {  
        // CSS-Klasse noch nicht vorhanden -> setzen!  
        cssKlasse = cssKlasse + ' ' + neueKlasse;  
    }  
  
    // CSS-Klasse zuweisen  
    element.className = cssKlasse;  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.