:hover bei tables?
tomstig 12.09.2004 - 13:21 915 13
tomstig
OC Addicted
|
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 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
|
mozilla, safari und opera könnens. ie nur als a:hover afair
|
Rektal
Here to stay
|
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 behavior: url(/js/forum_htc.htc);
im CSS definiert. Das File forum_htc.htc: <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
Legendundead
|
kann das nicht ie7 auch?
ich für meinen teil werd' mich bei meinen nächsten "projekten" darauf verlassen...
|
Rektal
Here to stay
|
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
|
iirc gings bei mir im ie auch immer
|
Rektal
Here to stay
|
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
|
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
- - - - - - -
|
steh auch gerade vor einem hover Problem wie kann ich bei normalen Text diesen Effekt anwenden? -> das soll passieren: 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
Here to stay
|
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
|
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...) 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 Schaffen wir das...JA wir schaffen das kindergarten?
|
watchout
Legendundead
|
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
|
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
|
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.
|