CSS Tabelle Reihen Hover

Ridefreak · 23. Mai 2011

Hallo Leute!

Schon seit ein Paar Tagen teste ich rum, aber es will irgendwie nicht so recht. Dies Sache ist folgende. Ich habe eine HTML Seite mit einer Tabelle inklusive Style Daten. Meine Ziele sind folgende:

1. Verlinken einer ganzen Zeile
2. Mousekursuränderung bei Link
3. Einen hovereffekt auf die ganze Zeile!

Ausstehend ist noch Punkt 3. Als ein Hover über die ganze Spalte. Habe es mehrmals versucht, aber es will einfach nicht funktionieren. Habe mal hier ein Beispiel verlinkt, um zu sehen was ich genau meine mit dem Hover.

Hier noch mein Code:

Code:

<html>
<head>
<title>Test Center Webservice</title>
</head>
<body>
<div align="center">
<p><img src="..\logo.jpg" align="center" alt="test"></p>
<a href="../index.html">zur&uuml;ck zum Index</a>
<br>
<br>
<br>
<h4>test</h4>

<style>

{font-weight:bold}body
{font-family:arial,sans,sans-serif;margin:0}#app-container{clear:both;position:absolute;top:115px}

.modal-dialog-bg{z-index:9}body,body td,.tbl,.tblGeneric{font-size:13px}
.tbl tr.rShim td,
.tbl td.rShi

			{padding:0;border-bottom:0}
.tbl		{	table-layout:fixed;
				border-collapse:collapse;
				border-style:none;
				border-spacing:0px;
				width:0px;
				border-bottom:1px #ccc solid}
				
.tbl td 	{	padding:0 3px;
				overflow:hidden;
				white-space:normal;
				letter-spacing:0;
				word-spacing:0;
				background-color:#fff;
				z-index:1;border-top:0px none;
				border-left:0px none;
				border-bottom:1px solid #CCC;
				border-right:1px solid #CCC;}

.tbl td.overview {	background-color:#cc99ff;
					font-family:arial,sans,sans-serif;
					font-size:100.0%;
					font-weight:normal;
					font-style:normal;
					color:#000000;
					text-decoration:none;
					text-align:center;
					vertical-align:bottom;
					white-space:normal;
					overflow:hidden;
					text-indent:0px;
					padding-left:3px;
					border-top:1px solid #CCC;
					border-right:1px solid #CCC;
					border-bottom:1px solid #CCC;
					border-left:1px solid #CCC;} 					
					
.tbl td.s4 {	background-color:#ffffff;
					font-family:arial,sans,sans-serif;
					font-size:100.0%;
					font-weight:normal;
					font-style:normal;
					color:#000000;
					text-decoration:none;
					text-align:center;
					vertical-align:bottom;
					white-space:normal;
					overflow:hidden;
					text-indent:0px;
					padding-left:3px;
					border-right:1px solid #CCC;
					border-bottom:1px solid #CCC;
					border-left:1px solid #CCC;} 

.tbl td.freetblright {	background-color:#ffffff;
					font-family:arial,sans,sans-serif;
					font-size:100.0%;
					font-weight:normal;
					font-style:normal;
					color:#000000;
					text-decoration:none;
					text-align:center;
					vertical-align:bottom;
					white-space:normal;
					overflow:hidden;
					text-indent:0px;
					padding-left:3px;
					border-right:1px solid #CCC;
					border-bottom:1px solid #CCC;
					border-left:1px solid #CCC;} 
					
					
.tbl td.freetblleft {	background-color:#ffffff;
					font-family:arial,sans,sans-serif;
					font-size:100.0%;
					font-weight:normal;
					font-style:normal;
					color:#000000;
					text-decoration:none;
					text-align:center;
					vertical-align:bottom;
					white-space:normal;
					overflow:hidden;
					text-indent:0px;
					padding-left:3px;
					border-right:1px solid #CCC;
					border-bottom:1px solid #CCC;
					border-left:1px solid #CCC;} 					
					
tr:hover { background-color:silver; }

tbody:hover {background-color: yellow;}

</style>
</head>
<table>
<body style="border: 0px none; margin: 0px;"><table id="tblMain" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><table class="tbl" id="tblMain_0" border="0" cellpadding="0" cellspacing="0"><tbody><tr class="rShim">
<td class="rShim" style="width: 0pt;"></td>
<td class="rShim" style="width: 350px;"></td>
<td class="rShim" style="width: 70px;"></td>
<td class="rShim" style="width: 70px;"></td>
<td class="rShim" style="width: 69px;"></td></tr><tr>
<td class="hd"><p style="height: 16px;">.</p></td>
<td class="overview">Name:</td>
<td class="overview">System:</td>
<td class="overview">Publisher:</td>
<td class="overview">USK Wertung:</td>
</tr>

<tr>
<td class="hd"><p style="height: 16px;">.</p></td>
<td class="freetblright"></td>
<td class="freetblleft"></td>
<td class="freetblright"></td>
<td class="freetblleft"></td>
</tr>

<tr>
<td class="hd"><p style="height: 16px;">.</p></td>
<td class="s4"onclick="javascript:window.location.href='bfbc.html'" onmouseover="this.style.cursor='pointer';">Battlefield bad Company</td>
<td class="s4"onclick="javascript:window.location.href='bfbc.html'" onmouseover="this.style.cursor='pointer';">PS3</td>
<td class="s4"onclick="javascript:window.location.href='bfbc.html'" onmouseover="this.style.cursor='pointer';">EA</td>
<td class="s4"onclick="javascript:window.location.href='bfbc.html'" onmouseover="this.style.cursor='pointer';">18</td>
</tr>

<tr>
<td class="hd"><p style="height: 16px;">.</p></td>
<td class="s4"onclick="javascript:window.location.href='midg.html'" onmouseover="this.style.cursor='pointer';">Mirrors Edge</td>
<td class="s4"onclick="javascript:window.location.href='midg.html'" onmouseover="this.style.cursor='pointer';">XBOX 360</td>
<td class="s4"onclick="javascript:window.location.href='midg.html'" onmouseover="this.style.cursor='pointer';">EA</td>
<td class="s4"onclick="javascript:window.location.href='midg.html'" onmouseover="this.style.cursor='pointer';">16</td>
</tr>

<tr>
<td class="hd"><p style="height: 16px;">.</p></td>
<td class="s4"onclick="javascript:window.location.href='sprmglxy.html'" onmouseover="this.style.cursor='pointer';">Super Mario Galaxy</td>
<td class="s4"onclick="javascript:window.location.href='sprmglxy.html'" onmouseover="this.style.cursor='pointer';">Wii</td>
<td class="s4"onclick="javascript:window.location.href='sprmglxy.html'" onmouseover="this.style.cursor='pointer';">Nintendo</td>
<td class="s4"onclick="javascript:window.location.href='sprmglxy.html'" onmouseover="this.style.cursor='pointer';">6</td>
</tr>

</tbody>
</table>
</tbody>
</table>
</div>
</body>
</html>

Weis langsam nimmer weiter

Gruß

Ride

Fipsi16 · 23. Mai 2011

Auf der Seite ist das aber mit javascript gelöst.
Trotzdem könntest du mal versuchen es mit "tr:hover td { background-color:silver; }" versuchen.

Ridefreak · 23. Mai 2011

Nur die Hover und Link sachen sind mit javascript verwirklicht worden. Bei meinen anderen Beispielen (die hier nicht verlinkt wurden, erledigen das CSS elemente).

Wenn ich

Code:

.tbl td:hover { background-color:silver; }

dann wird jede einzelne Zelle Silber, jedoch nicht die ganze Zeile.

Das hier Funktioniert leider auch nicht:

Code:

.tbl td.row:hover { background-color:silver; }

Gruß

Ride

Eagle-PsyX- · 23. Mai 2011

Du solltest doch tr (Zeile) hovern nicht td (Zelle), wenn du die ganze Reihe willst...

Fipsi16 · 23. Mai 2011

Ich hab ja schon geschrieben tr:hover td { background-color:#000;}
Wenn die Zeile gehovert ist, dann macht er alle dazugehörigen Zellen in der Farbe.
Hast du einen Link zu der Seite/Tabelle? Dann könnte man sich mit Firebug etwas spielen.

Ridefreak · 23. Mai 2011

Argg sorry hatte td gelesen.... Jedenfalls klappt "tr:hover td { background-color:silver; }"
leider auch nicht. Tut mir leider Leid, habe es auch selber nur lokal auf dem Rechner.

Gruß

Ride

Eagle-PsyX- · 23. Mai 2011

Code:

table.table1 thead, table.table1 tfoot {
  background-color: #a5bee4;
}

table.table1 thead th {
  text-align: left;
  padding-left: 5px;
  border: 1px solid #3c4f9f;
  border-width: 1px 1px 0 0;
  font-weight: bold;
}

table.table1 tfoot th {
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  border: 1px solid #3c4f9f;
  border-width: 1px 1px 1px 0;
}

table.table1 thead th img {
  position: relative;
  top: 3px;
  margin-right: 5px;
}

table.table1 tbody tr td {
  padding-left: 3px;
  border: 1px solid #576991;
  border-width: 1px 1px 0 0;
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

table.table1 tbody tr td a {
  font-weight: bold;
}
table.table1 tbody tr td.clear {
  padding: 0;
  margin: 0;
}

table.table1 tbody.admin tr td{
  border: 1px solid #576991;
  padding-left: 5px;
}
table.table1 tbody.admin tr td, table.table1 tbody.admin tr td a {
  font-size: 11pt;
}
table.table1 tbody.admin tr td a.v2 {
  font-size: 14pt;
  font-weight: normal;
}
table.table1 tbody.admin a:hover {
  text-decoration: underline;
}
table.table1 tbody.admin tr td img {
  vertical-align: bottom;
  margin-right: 5px;
}
table.table1 tbody tr.T1 {
  background-color: #C7D4EF;
}
table.table1 tbody tr.T2 {
  background-color: #DBDFE6;
}
table.table1 tbody tr.T3 {
  background-color: #748dc6;
}
table.table1 tbody tr.T4 {
  background-color: #91a8dd;
}
table.table1 tbody tr.T1:hover, 
table.table1 tbody tr.T2:hover, 
table.table1 tbody tr.T3:hover, 
table.table1 tbody tr.T4:hover {
  background-color: #b6c2dd;
}
table.table1 tbody td:first-child,
table.table1 th:first-child  {
  border-left-width: 1px;
}

Klappt das Hovern der Reihe ganz gut. Siehe Screenshot, hier ist "login.log" gehovert.

Zudem bin ich mir nicht sicher, ob tr:hover td überhaupt gültig ist. Soweit ich mich richtig entsinne, gehört :hover/:focus/:visited immer als absolut letztes.

Fipsi16 · 23. Mai 2011

Ist gültig. Wird sehr oft für Menüs verwendet um auf die Unterpunkte zuzugreifen, wenn man am/über dem überpunkt ist.

Eagle-PsyX- · 23. Mai 2011

@Fipsi16
Stimmt. Wenn ich mir mein Menü anschaue, ist das auch so umgesetzt. Das auch bis heute W3C CSS 2.1 valide ist.

Suche

CSS Tabelle Reihen Hover

Ridefreak

Lieutenant

Fipsi16

Lt. Commander

Ridefreak

Lieutenant

Eagle-PsyX-

Commander

Fipsi16

Lt. Commander

Ridefreak

Lieutenant

Eagle-PsyX-

Commander

Anhänge

Fipsi16

Lt. Commander

Eagle-PsyX-

Commander

Ähnliche Themen