:hover bei tables?

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/hover_bei_tables_124365/page_1 - zur Vollversion wechseln!

tomstig schrieb am 12.09.2004 um 13:21

ihr kennt sicher den effekt, wenn man mit der maus über ein feld in einem table fährt, dass sich die hintergrundfarbe ändert. normalerweise - so mache ich das normalerweise - mach ich das mit

Code: PHP

onmouseover="this.style.backgroundColor = ''"

jetzt hab ich durch spielerei herausgefunden, dass sich das auch in css realisieren lässt, einfach durch td:hover{...}...

wie weit kann man dem vertrauen? akzeptiert das jeder browser?? is das überhaupt w3c-validate?

HVG schrieb am 12.09.2004 um 13:53

mozilla, safari und opera könnens. ie nur als a:hover afair

Rektal schrieb am 12.09.2004 um 22:20

Ist valid. Fuer eine Version ohne onmouseover gefummelt mittem im Source siehe http://atvplus.at/css/ie.css , dort wird auf dem Table der den Effekt bieten soll

Code:

behavior: url(/js/forum_htc.htc);

im CSS definiert. Das File forum_htc.htc:

Code:

<public:attach event="onmouseover" onevent="hoverIn()" />
<public:attach event="onmouseout"  onevent="hoverOut()" />
<script language="jscript">
	function hoverIn() {
		this._realColor = this.currentStyle.backgroundColor;
		this.runtimeStyle.backgroundColor = '#FEDB99';
	}
	function hoverOut() {
		if (this._realColor) {
			this.runtimeStyle.backgroundColor = this._realColor;
		}
	}
</script>

Das mag jetzt nach mehr Arbeit klingen, ist es vielleicht wenns man noch nie gemacht hat. Aber es haelt den Source kleiner und geringer. Fuer alle anderen Browser einfach :hover verwenden.

watchout schrieb am 13.09.2004 um 10:47

kann das nicht ie7 auch?

ich für meinen teil werd' mich bei meinen nächsten "projekten" darauf verlassen...

Rektal schrieb am 13.09.2004 um 10:50

Ja. Ich habs in der Praxis verwendet und war nicht zufrieden. Ich hatte Probleme mit einem Effekt aehnlich FOUC (Flash Of Unstyled Content). Seite zuerst bisserl falsch ausgesehen, bis Dokument geladne, dann ist IE7 druebergefahren und die ganze Seite hat "gelebt". Und das jedesmal, es gibt kein Caching fuer diese Dinge wegen JS. Und, um nur fuer den :hover (bei dem rein aus meiner Theorie) das FOUC-Problem nicht auftreten wuerde, will ich nicht xx-kb JS code einbinden muessen. It's a matter of taste; I tasted it.

Wobei man nicht veressen sollte dass ich einer der ersten war der IE7 hier gepostet hat; damals aber praktisch nicht verwendet habe. Customers sind leider nicht erfreut wenn in dem am meisten genutzt Browser die Seite nach dem vorgegebenen Layout nicht sofort sitzt, nicht mal wenn sie eigentlisch schon im Cache sein sollte. IE7 will ich dann ja verwenden, wenn ich fortgeschrittenes CSS verwenden moechte (sonst sehe ich wenig Sinn soviel zusaetzlich zu laden); wenn das aber dazu fuehrt, dass man immer merkt das sich das Layout einer Seite nachtraeglich aendert, bringts in der Praxis nicht wirklich was. Leider

ica schrieb am 14.09.2004 um 10:57

iirc gings bei mir im ie auch immer

Rektal schrieb am 22.09.2004 um 11:29

Zitat von Rektal
Zitat von Little Shorty
boxed lüfter können manchmal ganz schön laut sein

Muss ich vielleicht teilweise zuruecknehmen

Verwende es gerade fuer ein CMS Backend, in dem ich die Advanced Features weniger fuer obskures Styling von Elementen (generated content etc. ) verwendne, sondern einfach nur bequem um farbzuweisungen mit attribut-selectoren, :hover und :focus zu machen.

Hier gibts eben nicht dieses FOUC Problem.

Rektal schrieb am 28.10.2004 um 14:40

Vielleicht nehm ichs doch nicht zurueck. =)

Der Browser crasht mir waehrend der Entwicklung mit IE7 ca. 10 mal .. in der Stunde (!). Absoluter Wahnsinn.

Duerfte an der Kombination mit Frameset liegen, doch ohne dem brauch ich kein CMS entwickeln.

Muss es wohl wieder deaktivieren ...

c147258 schrieb am 06.11.2004 um 23:30

steh auch gerade vor einem hover Problem

wie kann ich bei normalen Text diesen Effekt anwenden?
-> das soll passieren:

Code:

 a:hover { text-decoration:none; font-weight:bold; font-size:15pt; letter-spacing:2pt; margin-left:10px;}

allerdings soll es kein Link sein sondern ganz normaler Text

beim darüberfahren soll zusäztlich nach dem drüberfahren 2 Wörter unter dem hover Wort erscheinen:

Bedienung
Einsteiger (Unterpunkte: diese 2 sollen nach drüberfahren von Bedienung zum Vorschein kommen)
Fortgeschrittene

Schaffen wir das...JA wir schaffen das

(sry...bin html einsteiger)
Vielen Dank

Rektal schrieb am 07.11.2004 um 00:10

Die :hover-Pseudo-Klasse ist dafuer zusatendig, dass beim Maus drueberfahren was passiert. Theoretisch. In der Praxis unterstuetzt der IE das nicht, es bleibt die also nicht anderes uebrig ausser JS. Und mit JS kannst die Woerter auch einblenden.

Ist beides auch mit CSS moeglich, aber nicht so direkt im IE. IE7 kannst dir ansehen, ist aber nicht Praxistauglich (IMO).

tomstig schrieb am 07.11.2004 um 10:30

Zitat von c147258

Code:

 a:hover { 
  text-decoration:none; 
  font-weight:bold; 
  font-size:15pt; 
  letter-spacing:2pt; 
  margin-left:10px;
}

(und so schreibt man das auf, nicht in einer wurst...)
dann nimm mal font oder sowas oder mach überhaupt .text:hover {blabla} und im text <[font/div/span] class="text"> (aber entweder font, div oder span, nicht so hinschreiben, was da steht...)

Zitat

allerdings soll es kein Link sein sondern ganz normaler Text

lass mich raten, du machst ein menü? dann würd ich dir empfehlen, dass entweder erst beim klicken zu öffnen, oder das ganze mit dropdown-menüs zu machen, weil wenn du das nur mit onmouseover machst, wird dein ganzes menü "herumhupfen", dass es eine freud is. außer halt du machst, dass das "eingerollt" wird, sprich sich langsam öffnet (schwer zu erklären :/)

oder du machst, dass so wie die meisten und tust dich ohne js spielen und hast alle deine menüpunkte gleich offen :eek:

Zitat
Schaffen wir das...JA wir schaffen das

kindergarten? :rolleyes:

watchout schrieb am 07.11.2004 um 11:45

man kann den IE-Usern mittels conditional comments ein javascript einbinden, das hilft dann auch ein bissl der eher schwachen javascript-performance von mozilla...

andererseits kannst du auch einfach einen link mit href="#" machen, der tut dann auch nix (und das GsD in jedem browser...) ausser eben ein :hover bereitstellen...

kleinerChemiker schrieb am 07.11.2004 um 18:40

kurz einwend: der link würde schon was machen, zumindest den courser ändern. und anklickbar ist er auch, aber ka was ein browser bei nem href="#" macht.

Rektal schrieb am 07.11.2004 um 19:10

Zitat von kleinerChemiker
kurz einwend: der link würde schon was machen, zumindest den courser ändern. und anklickbar ist er auch, aber ka was ein browser bei nem href="#" macht.

Cursor kann man mit CSS aendern ( http://www.w3.org/TR/CSS21/ui.html#propdef-cursor ), das # weisst ihn darauf an, zu einem leeren Anker zu springen, da es den nicht gibt, wir er zum Anfang der Seite springen. Abhelfen in dem das onclick-Event 'false' zurueck gibt.

Das href-Attribut sollte idealerweise aber auf eine Seite zeigen mit der Leute auch was anfangen koennen, wenn JS abgedreht ist.