Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > th:hover sollte die dazugehörende spalte highlighten
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > th:hover sollte die dazugehörende spalte highlighten

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von okley am 01.06.2005 - 22:20
ich versuche nur mit css hinzubekommen, dass wenn ich über eine titelzelle gehe (:hover), die ganze dazugehörende spalte der tabelle eine eigenschaft zugewiesen bekomme, z.b. color: red;

soweit ich weiss ist das irgendwie nicht möglich, wenns nach mir geht, wäre das aber eine sehr gut brauchbare sache...

ich hab folgendes probiert, was mir allerdings nur gerade die darauffolgenden elemente markiert, also die restliche th in der zeile (tr):

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

table tr th:hover~th{
			color: red;
		}
/* HTML: */
        <table cellpadding='0' cellspacing='0' width='100%'>
        <tr>
                <th>Bezeichnung</th>
                <th>Status</th>
                <th>Mittel</th>
                <th>Beispiel</th>
        </tr>
         <tr>
            <td >A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
         </tr>


ich denke ihr versteht was ich meine , gesehen oder gefunden habe ich (zumindest etwas das funktioniert) noch nicht

geschrieben von Jan am 02.06.2005 - 10:30
Hi!

Das Beispiel dürfe nur im Mozilla funktionieren. Im IE nicht. Der unterstützt das nur für a.


Gruß
Jan

geschrieben von René am 02.06.2005 - 10:38
Vielleicht kannst du damit etwas anfangen --> http://javarea.de/forum/showthread.....eadid=9234

geschrieben von okley am 02.06.2005 - 12:23
danke für den link René. Dass mein Ziel mit Javascript erreichbar ist, wusste ich . Ich möchte aber auf Javascript verzichten, obwohl es in diesem Falle ja nur ein zusätzliches "Feature" wäre, auf das man gut verzichten kann (z.B. wenn JS deaktiviert sein soltle).

@Jan, ich arbeite primär mit Mozilla FireFox, nur zum Test ob meine Seite im IE akzeptabel aussieht, starte ich den IE auf!

geschrieben von Matneu am 02.06.2005 - 12:52
Spontane Idee (nicht von mir ausprobiert):
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 

th.1:hover{
color: red;
}
/* HTML: */
<table>
	<tr>
		<th class="1">
			1-1
		</th>
		<th class="2">
			1-2
		</th>
		<th class="3">
			1-3
		</th>
	</tr>
	<tr>
		<th class="1">
			2-1
		</th>
		<th class="2">
			2-2
		</th>
		<th class="3">
			2-3
		</th>
	</tr>
	<tr>
		<th class="1">
			3-1
		</th>
		<th class="2">
			3-2
		</th>
		<th class="3">
			3-3
		</th>
	</tr>
</table>


So far...
Matthias

geschrieben von okley am 02.06.2005 - 13:32
hi,

danke für deine mühe, ich habs nicht getested, aber ich bin überzeugt es würde auf diese weise gehen (class' je zelle angeben).
ich suche jedoch nach einer puren css lösung, die mir erlaubt die untegeordnete col bzw. row zu highlighten bzw. allgemein anzusprechen. die attribute für den strukturierten aufbau dafür gibt es schon: http://www.w3.org/TR/REC-html40/str....ef-headers

leider krieg ich nicht raus, falles überhaupt möglich ist, meine titelzelle so anzusprechen, dass der gewünschte effekt eintritt

geschrieben von okley am 02.06.2005 - 13:44
ich bin jetzt soweit, dass ich immer die erste spalte highlighten kann:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 

/* Spalten highlighten */
		table tr:first-child+tr td{
			padding-top: 9px;
		}

/*HTML:*/
 <table summary="Projekte" cellpadding="0" cellspacing="0" width="100%">
		<caption>Projekte</caption>
        <tbody><tr>
                <th scope="col">Bezeichnung</th>
                <th scope="col">Status</th>
                <th>Mittel</th>

                <th>Beispiel</th>
        </tr>


          <tr>
            <td class="name">Newsscript</td>
            <td><a href="/bubblez/wwip/news/todo.txt" title="open status of &quot;Newsscript&quot;">status</a></td>
            <td>PHP, Javascript, MySQL</td>

            <td><a href="/bubblez/wwip/news/index.php" target="_blank" title="open &quot;Newsscript&quot; in a new Window">View</a></td>
          </tr>
          
          <tr>
            <td class="name">Statusscript</td>
            <td><a href="/bubblez/wwip/status/todo.txt" title="open status of &quot;Statusscript&quot;">status</a></td>
            <td>PHP</td>
            <td><a href="/bubblez/wwip/status/status.php" target="_blank" title="open &quot;Statusscript&quot; in a new Window">View</a></td>

          </tr>
</table>

geschrieben von Matneu am 02.06.2005 - 14:23
Zitat
  Original geschrieben von okley am 02.06.2005 - 13:44 [b]
ich bin jetzt soweit, dass ich immer die erste spalte highlighten kann:

Meine Lösung ist doch eine reine CSS-Lösung!?! Ich fürchte, mit first-child oder auch mit first-line wirst Du nicht zu Deinem gewünschten Ergebnis kommen.

So far...
Matthias

geschrieben von okley am 03.06.2005 - 12:00
ja, das stimmt deine lösung ist reines css. hab auch nie das gegenteil behauptet. nur würd ich eben gern, ohne class angaben arbeiten, also nur über allgemeine cssangaben zum ziel gelangen, wie ich ja schrieb:
Zitat
 untegeordnete col bzw. row zu highlighten bzw. allgemein anzusprechen.


nunja ich muss dann wohl doch was anderes einfallen lassen, oder matneus lösungsweg einschlagen

geschrieben von Cluster am 03.06.2005 - 12:21
Du wirst wohl um die class nicht drumrum kommen.

Auch wenn Du dem <th> einen style zuweisen würdest wie <th style="..."> wird das nicht klappen, da Du darin keinen Hover einfügen kannst.

Auch wenn Du z.B. mit onmouseover arbeiten würdest, müsstest Du z.B. ein kleines Javascript integrieren.

geschrieben von Cluster am 03.06.2005 - 12:30
Vielleicht ist Dir ja hiermit geholfen:

take a look at http://www.dieblaschkes.de/javarea/okley.html

geschrieben von Matneu am 03.06.2005 - 13:19
Zitat
  Original geschrieben von okley am 02.06.2005 - 12:23 [b]
Dass mein Ziel mit Javascript erreichbar ist, wusste ich . Ich möchte aber auf Javascript verzichten, obwohl es in diesem Falle ja nur ein zusätzliches "Feature" wäre, auf das man gut verzichten kann (z.B. wenn JS deaktiviert sein soltle).


So far...
Matthias

geschrieben von okley am 03.06.2005 - 13:21

geschrieben von sobi am 18.06.2005 - 10:45
Highlighted eine Tabellenzelle vollständig mittels CSS (kein JavaScript erforderlich)

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 

body {
  color: #171717;
  background-color : #a0b3c0;
  font-family: Comic Sans MS, verdana, arial, sans serif;
  font-size: 10pt;
}

table,tr,td {
  color: #171717;
  font-family: Comic Sans MS, verdana, arial, sans serif;
}


td.menuebar {
  color: #171717;
  font-family: Comic Sans MS, verdana, arial, sans serif;
  font-size: 10pt;
  font-weight: normal;
  width: 1%;
}

td.active_menuebar {
  color: #FFFFFF;
  background-color : #007B79;
  font-family: Comic Sans MS, verdana, arial, sans serif;
  font-size: 10pt;
  font-weight: normal;
  width: 1%;
  padding-left: 8px;
}

.menuebar a:link, a:visited, a:active{
  display: block;
  background-color : #00CBA9;
  color: #171717;
  text-decoration: none;
  font-family: Comic Sans MS, verdana, arial, sans serif;
  padding-left: 8px;
}

.menuebar a:hover {
  background-color : #007B79;
  color: #FFFFFF;
  text-decoration: none;
  font-family: Comic Sans MS, verdana, arial, sans serif;
  font-size: 10pt;
}


Hier der HTML
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 

<!-- Menuebar Table -->
<table width="600" border="0" align="center" cellpadding="0">
 <tr>

  <td class="active_menuebar">Anzeigen</td>
  <td class="menuebar"><a href="#" title="Druckbare Ansicht erzeugen">Drucken</a></td>
  <td class="menuebar"><a href="#" title="Counterstände zum Editieren öffnen">Bearbeiten</a></td>
  <td class="menuebar"><a href="#" title="Steuerdatei für Links anlegen">Erstellen</a></td>
  <td class="menuebar"><a href="#" title="Hinweise zum Gebrauch">Hilfe</a></td>

 </tr>
</table>


Mit dem HOVER Befehl kannst Du dann die üblichen CSS Eigenschaften an die Tabellenzelle übergeben. Die Hintergrundfarbe für die aktive Zelle musst Du über td.active_menuebar einstellen weil du in der Tabelle keinen 2. a:link definieren kannst. Bis auf HOVER wird innerhalb der Tabelle für den Link immer die Eigenschaft von .menuebar a:link /visited / active ausgegeben. Einen 2. HOVER kannst Du schon festlegen (ist alles mit IE getestet). Den cellpadding="0" im HTML Code für die MENUEBAR TABLE musst Du eingeben, sonst bekommst Du um die Zelle td.active_menuebar einen unschönen Rand. Da kann man jetzt weiter dran arbeiten und mehr Eigenschaften rüberbringen.

Ich hoffe ich konnte Dir auch mal helfen.

cu
Uli

geschrieben von okley am 18.06.2005 - 10:56
nett von dir, dass du dir die mühe gemacht hast mir zu helfen
allerdings, muss ich dir auch sagen, dass du wahrscheinlich nicht recht verstanden hast was ich eigentlich will

ich möchte mittels css-pseudoklassen und normalen selektoren (also keine class oder id) alle zellen einer tabelle ansprechen, die zu einer titelzelle (th) gehören, also zu derselben spalte. auf http://www.webrama.tk siehst du gleicha uf der homepage, wie sich die spaltenfarbe ändert, sobald du über eine titelzelle fährst.

nichts für ungut, ich glaube nicht, dass ich ohne css3 ansatzweise chancen habe das zu realisieren, vielleicht klappts dann mit css3 ...


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.