"Christmas - the time to fix the computers of your loved ones" « Lord Wyrm

:hover bei tables?

tomstig 12.09.2004 - 13:21 915 13
Posts

tomstig

OC Addicted
Avatar
Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341
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

untitled
Avatar
Registered: Jun 2000
Location: NÖ
Posts: 5968
mozilla, safari und opera könnens. ie nur als a:hover afair

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4452
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

Legend
undead
Avatar
Registered: Nov 2000
Location: Off the grid.
Posts: 6845
kann das nicht ie7 auch?

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

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4452
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 ;)
Bearbeitet von Rektal am 13.09.2004, 11:12

ica

hmm
Avatar
Registered: Jul 2002
Location: Graz
Posts: 9818
iirc gings bei mir im ie auch immer

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4452
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

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4452
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

- - - - - - -
Avatar
Registered: Jul 2003
Location: AT/VIE
Posts: 1477
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 :D

(sry...bin html einsteiger)
Vielen Dank

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4452
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

OC Addicted
Avatar
Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341
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 :D
kindergarten? :rolleyes:

watchout

Legend
undead
Avatar
Registered: Nov 2000
Location: Off the grid.
Posts: 6845
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

Here to stay
Avatar
Registered: Feb 2002
Location: Wien
Posts: 4282
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

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4452
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.
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz