✔ onMouseOver -> CSS mit Style Attribut überschreiben

[Mik3e]

Hi,

Ich stehe vor einem kleinen Style-Problem.
Es gibt eine Tabelle, deren Zellen mit CSS formatiert sind. Ich möchte nun, dass bei einem Mousover über eine Zeile die gesamte Zeile (inklusive aller Zellen) eingefärbt wird.

Das Problem ist, dass die style='' Anweisung im <tr> nicht die Style eigenschaft einer einzelnen Zelle überschreibt.

Hier der Quellcode:

<tr onMouseOver="alert('test'); this.style.backgroundColor='#FFFFC0';" onMouseOut="this.style.backgroundColor='';">
    <td nowrap class="tablecontent_blau">zelle1t<d>
    <td nowrap class="tablecontent_blau">zelle2</td>
    <td width="100%" nowrap class="tablecontent_blau">zelle3</td>
</tr>

Wie ihr seht, ist im <TR> die Anweisung zum färben der gesamten Reihe. Und: In jedem TD Element gibt es eine Klassen-Zuweisung aus einem CSS. Wie gesagt funktioniert das so nicht.. Wie kann ich die CSS-Clases im TD "overrulen"?

Danke & LG
Mike

 

[Bubblez]

hat du mal versucht ob die property auf TDs ohne class bestimmung geht? du kannst die Hintergrundfarbe auch über this.bgColor setzen, oder wenn du es über style machst. dann vielleicht so: this.style.background= 'black !important';
das important steht im css dafür, dass diese farbe quasi als "nicht überschreibbbar" steht bzw. bestehende werte überschreibt.

 

[Mik3e]

Hi,

Wenn ich die "class=.." im TD entferne, funktioniert es prächtig.
Auch wenn ich das Script direkt in die zelle NACH dem class="" setze, funktioniert es.

Important sagt mir nichts, werde ich mir mal zu gemüte führen...
Für weitere Vorschläge bin ich jederzeit offen

Danke & LG
Mike

 

[Mik3e]

Hi,
Habs nun versucht -> klappt nicht..

Folgendes Funktioniert (ohne classes in td):

<tr onMouseOver="this.style.backgroundColor='#FF0000';">
    <td nowrap>zelle1</td>
    <td nowrap>zelle2</td>
</tr>

Und das geht schon nicht mehr (da die Attribute in der Klasse höher priorisiert sind als die im TR):

<tr onMouseOver="this.style.backgroundColor='#FF0000';">
    <td nowrap class="cssclass1">zelle1</td>
    <td nowrap class="cssclass2">zelle2</td>
</tr>

Dafür muss es doch eine recht simple Lösung geben nehme ich an, oder?
Ciao,
Mike

 

[Gumbo]

Probier mal Folgendes:

<table>
	<tr class="klasse1"><td>Tabellenzelle 1</td><td>Tabellenzelle 2</td><td>Tabellenzelle 3</td></tr>
	<tr class="klasse2"><td>Tabellenzelle 1</td><td>Tabellenzelle 2</td><td>Tabellenzelle 3</td></tr>
	<tr class="klasse3"><td>Tabellenzelle 1</td><td>Tabellenzelle 2</td><td>Tabellenzelle 3</td></tr>
</table>

.klasse1 {
	background-color:		#f66;
}
.klasse2 {
	background-color:		#6f6;
}
.klasse3 {
	background-color:		#66f;
}
tr:hover,
.tr-hover,
.tr-hover * {
	background-color:		#fe0;
}

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

function addClass(_obj, _className)
{
	if( _obj.className = _obj.className + " " + _className ) {
		return true;
	} else {
		return false;
	}
}
function removeClass(_obj, _className)
{
	var regExp = new RegExp("\s*" + _className + "\s*");
	if( _obj.className = _obj.className.replace(regExp, "") ) {
		return true;
	} else {
		return false;
	}
}

 

[Mik3e]

Hi,

Geniale Lösung..
Nur gibt es jetzt das Problem, dass er einfach alle TR die es gibt färbt.. (die seite besteht aus mehreren Tabellen).
Ich hätte noch gern die Möglichkeit, dass ich ihm sage, welche Zeilen er färbe soll.
Wichtig dabei: die Zeilen haben keinen Namen oder ID..

Vielleicht hast Du dazu noch eine Idee

LG
Mike

 

[Gumbo]

Ich hab sogar mehrere Ideen: Entweder, du weist jedem Element dieses Verhalten durch Deklaration der entsprechenden onmouseover- und onmouseout-Attribute zu, oder weist ihnen zusätzliche Klassen zu und passt den Algorithmus etwas an.

 

[hela]

Hallo,

ich würde es mit entsprechenden CSS-Klassen machen:

<tr onMouseOver="this.className='gelb';" onMouseOut="this.className='';">
  	<td class="blau">zelle1</td>
  	<td>zelle2</td>
  	<td class="blau">zelle3</td>
  </tr>

CSS:

.gelb {
  	background-color: #ffc;
  }
  .blau {
  	background-color: #ccf;
  }
  tr.gelb td.blau {
  	background-color: #ffc;
  }

 

[Mik3e]

@Gumbo:
Danke, dein Lösungsansatz ist schon fast perfekt (außer das es eben einfach auf alle TRs der Site übernommen wird)... Wenn es noch gehen würde, dass er das nur auf von mir bestimmten anwendet, wärs genial.

@hela:
Das wird so nicht funktionieren, da du damit nur dem <TR> Tag eine neue Klasse zuweist. Diese ist aber niedriger priorisiert als die Klasse im <TD> Tag. Das heißt in dem Fall wird gar nichts passieren (und genau das ist eigentlich mein Problem

Vielleicht habt ihr ja noch andere Einfälle, wär toll..
Danke jedenfalls & LG
Mike

 

[hela]

...
@hela:
Das wird so nicht funktionieren, da du damit nur dem <TR> Tag eine neue Klasse zuweist. Diese ist aber niedriger priorisiert als die Klasse im <TD> Tag. ...

Ich glaub, da irrst du dich. Hast du's schon mal ausprobiert?

EDIT:
Offensichtlich hast du den kontextsensitiven Selektor übersehen:

tr.gelb td.blau {
  	background-color: #ffc;
 }

Damit wird die Hintergrundfarbe aller TD-Elemente mit der Klasse "blau" innerhalb des TR-Elements mit der Klasse "gelb" auf den gleichen Wert wie im übergeordneten TR-Element gesetzt.
Bei Gumbos Vorschlag wird das ebenso realisiert:

.tr-hover * {
  	background-color: #fe0;
  }