PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS + Javascript - Mouseover effekte

TheRealTentacle
2005-06-25, 19:42:26
Ich habe ein kleines problem, ich würde gerne einen Mouseover Effekt mit:

<td onmouseover="style.[ ... ]">

... realisiern, dabei aber gerne statt direkter Werte eine CSS klasse angeben.

Ich habe aber bisher dafür noch nichts gefunden, und ausprobieren half auch nicht wirklich.

Gibt es da eine Möglichkeit?
darph
2005-06-25, 19:48:12
onMouseOver="this.className = 'hullow'"

glaub ich
Gast
2005-06-26, 00:13:21
Welchen Sinn soll es haben den Klassennamen beim Überfahren mit der Maus zu ändern?



<td class="bla">

td.bla:hover { background-color:#F00; }
Nase
2005-06-26, 11:35:06
Welchen Sinn soll es haben den Klassennamen beim Überfahren mit der Maus zu ändern?



<td class="bla">

td.bla:hover { background-color:#F00; }
Funktioniert nur nicht im IE.
NullPointerException
2005-06-27, 05:31:17
Also CSS ist hier definitiv eine bessere Wahl als javaript.
Ausserdem sind das ja eben genau 'kaskadierende' Style Sheets.

tds mit hover effekten zu versehen führt hier leider nicht bei beiden browsern zum gewünschten ergebnis. das mag an der darstellung der elemente liegen.

man sollte stattdessen das element a zur formatierung verwenden, das ist besser geeignet, da es in beiden browsern funktioniert und man sonst ne browserweiche einbauen müsste.

ansonsten muss man das anders machen z.B. mit
style='display:block'
oder sowas... glaub ich zumindest.
darph
2005-06-27, 09:50:12
man sollte stattdessen das element a zur formatierung verwenden, das ist besser geeignet, da es in beiden browsern funktioniert und man sonst ne browserweiche einbauen müsste.
Ich würd aber eher JavaScript nehmen als den Link-Tag als Formatelement zu mißbrauchen. Letzteres führt nur zunicht-validem Code, ersteres funktioniert halt nicht, wenn JS nicht aktiv ist... da ich aber davon ausgehe, daß das eh nur ein visuelles Gadget ist, sollte das die Funktionalität nicht einschränken...
PatkIllA
2005-06-27, 11:13:08
valide ist das schon, aber entspricht halt nicht der eigentlich Bedeutung.
TheRealTentacle
2005-06-27, 13:37:57
onMouseOver="this.className = 'hullow'"

glaub ich

wenn dann ist es wohl

onMouseOver="style.className = 'hullow'"

Weil da reagiert der IE (sprich er ändert kurz den cursor), aber zeigt dennoch nicht die klasse an, der FF reagiert garnicht. Bei this.className reagiert auch der IE nicht.

Zur zeit habe ich es über CSS (:hover) gemacht, weil es die einzige variante ist, die wenigstens beim FF funktioniert.
darph
2005-06-27, 15:02:52
wenn dann ist es wohl

onMouseOver="style.className = 'hullow'"
Öhm.. der Klassenname ist kein Stil von CSS sondern ein Attribut des HTML-Elements.

className (http://de.selfhtml.org/javascript/objekte/all.htm#class_name) ist direktes Kind von document.all. und sollte demnach auch mit this ansprechbar sein... oder nicht?
darph
2005-06-27, 15:11:24
Weil da reagiert der IE (sprich er ändert kurz den cursor), aber zeigt dennoch nicht die klasse an, der FF reagiert garnicht. Bei this.className reagiert auch der IE nicht.
Dann machst du was falsch:

<html>
<head>

<style type="text/css">

.test { background-color: blue;
color: white;
}

.alt { background-color: yellow;
color: black;
border: 5px solid blue;
}

</style>
</head>
<body>
<table>
<tr>
<td>Headline</td>
<td class="test"
onMouseOver="this.className='alt'"
onMouseOut="this.className='test'">
testtest
</td>
</tr>
</table>
</html>

Das funktioniert. Sowohl mit IE (Avant) als auch mit dem Firefox 1.0.3
Gast
2005-06-27, 21:35:02
sry :( falsch geklickt.

Hier stand vorher, daß document.all aus einer 10 Jahre alten proprietären Erweiterung von JavaScript durch Microsoft entstand und daß das, was der Threadersteller suche, getElementById sei.

Ich wollte darauf antworten und hab aus Versehen auf edit geklickt. Tut mir Leid, das war keine Absicht.

-darph
darph
2005-06-28, 00:47:36
So, jetzt aber richtiges Antworten:


Das ist doch völlig irrelevant, wie alt .all. ist.

className ist okay
this ist okay

wo ist das Problem? Niemand benutzt document.all. Immerhin ist className in der DOM Spezifikation des W3C (http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-95362176).
TheRealTentacle
2005-07-11, 16:01:47
mhh, danke, ich werd mal schauen was ich da falsch gemacht habe.
Gast
2005-07-12, 15:20:35
Das ist doch völlig irrelevant, wie alt .all. ist.
Du hast mit document.all angefangen. Daß das nichts mit dem Problem des Threadstarters zu tun hat ist mir klar, wollte trotzdem drauf hinweisen. Hier lesen ja noch mehr Leute mit und schreiben dann am Schluß Skripte mit document.all.*
Gast
2005-07-12, 21:29:55
Funktioniert nur nicht im IE.

Wayne interessierts?
TheRealTentacle
2005-07-13, 11:17:24
Es gibt noch viele Menschen die den IE benutzen, weil sie z. B. ein Modem haben und sich nicht FireFox herunterladen möchten und so weiter. Sicherlich nicht so wichtig bei einem Mouseover Effekt, aber es geht ja um den gesammteindruck der Seite.
skamikaze
2005-07-13, 12:07:19
<head>
<style type="text/css">
.mouseover:hover{
color:pink;
text-align:right;
font-size:80pt;
text-decoration:overline;
}
</style>
</head>
<body>
<p class="mouseover">text</p>
</body>so sollte das funktionieren, glaub ich!
Gast
2005-07-13, 18:58:14
so sollte das funktionieren, glaub ich!
Hatten wir schon, klappt aber leider nicht:
Funktioniert nur nicht im IE.



-darph