CSS per JavaScript getauscht

[a*new*found*flo]

Hallo!
Normalerweise aus dem Ärmel geschüttelt, treibt es mich im Moment auf die Palme!
Ich habe dem Tag "tr" zwei Klassen zugewiesen, die vor Ort per Javascript getauscht werden.
Funktioniert bis hierhin auch super, nur bekomme ich es einfach nicht hin, dass mir auch ein Border angezeigt wird!
Hier mal der zugehörige Code:
CSS:

tr.normal
{
}

tr.hover
{
background: #8FCCFF;
border-color:#000000;
border-width:1px;
 border-style:solid;
}

JavaScript:

<tr class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">

Bei tr.normal soll sich nichts tun und bei tr-hover soll eine Hintergrundfarbe und die schwarze Umrandung kommen. Will sie aber nicht.
Kann mir bitte jemand von der Leitung helfen?
Dankeschön

 

[Maik]

Die border-Eigenschaft lässt sich nicht auf das tr-Element anwenden.

 

[a*new*found*flo]

oh, ok, daran habe ich überhaupt nicht gedacht! Danke schon mal!
Fällt dir eine Möglichkeit ein, wie ich mehrere Spalten in einer Zeile beim Mouseover mit einem Rahmen versehen kann? Weil, wenn ich das obrige Script auf die TD's anwende, hab ichs ja immer nur bei einem einzelenen und nicht bei der ganzen Reihe?!

 

[Maik]

Hierfür ist mir keine Möglichkeit bekannt.

 

[Gumbo]

Entweder mit CSS allein:

tr:hover td {
	…
}

Oder mit Unterstützung von JavaScript:

window.onload = function() {
	var trElements = document.getElementsByTagName("tr");
	for(var i=0; i<trElements.length; i++) {
		trElements[i].onmouseover = new Function("this.className += ' tr-hover'");
		trElements[i].onmouseout  = new Function("this.className.replace(/[\s\b]+tr-hover[\s\b]+/', ' ')");
	}
}

Ich hoffe, es funktioniert einwandfrei.

 

[a*new*found*flo]

Hallo!

Wie funktioniert das mit CSS genau?
Weil wenn ich das JavaScript da unten anwende, dann habe ich den MouseOver Effekt ja bei jedem "TR" oder?

 

[Ceppi]

Hallo,

wenn du den Mouseover-Effekt nur für eine bestimmte Menge an TR-Elementen anwenden möchtest, musst du Gumbos Code etwas verändern:

var trElements = document.getElementById("mouseoverBereich").getElementsByTagName("tr");

Gumbo setzt für jedes TR-Element beim Laden des Fensters in Javascript einen Mouseover-und Mouseout-Handler. Die darin angegebenen Funktionen bearbeiten den angegebenen Klassennamen (className):
OnMouseover fügt den Klassennamen tr-hover hinzu, während OnMouseout ihn wieder mit einem Leerstring ersetzt.

Ceppi

 

[a*new*found*flo]

ok, danke schon jetzt für die viele Hilfe!!
Ich hab das jetzt mal versucht umzusetzten, aber leider funktioniert es nicht.
Sieht wie folgt aus:

<script type="text/javascript">
<!--
window.onload = function() {
	var trElements = document.getElementById("mouseoverBereich").getElementsByTagName("tr"); 
	for(var i=0; i<trElements.length; i++) {
		trElements[i].onmouseover = new Function("this.className += ' tr-hover'");
		trElements[i].onmouseout  = new Function("this.className.replace(/[\s\b]+tr-hover[\s\b]+/', ' ')");
	}
}
// -->
</script>

<tr id="mouseoverBereich">
     <td>Blabla</td>
</tr>

tr-hover
{
background: #8FCCFF;
border-color:#000000;
border-width:1px;
 border-style:solid;
}

Mfg Flo

 

[Ceppi]

Wieviel TR-Elemente beinhaltet document.getElementById('mouseoverBereich') bei dir denn?
Richtig, keines. Ich dachte eher an so etwas:

<div id='mouseoverBereich'>
  <table>
    <tr>
      <td>ABC</td>
    </tr>
  </table>
</div>

 

[a*new*found*flo]

Hmmm, diese Variante funktioniert bei mir leider auch nicht.