[Umfrage] Hover Effekt: CSS oder Javascript - Seite 2

Lars · 03.04.2006, 22:00

Die Pseudoklasse :hover wird offiziell für alle Elemente unterstützt, der IE unterstützt dies allerdings bisher nur für <a>. Ob dieses Fehlverhalten im IE 7 korrigiert wird, weiß ich nicht.

xardias · 04.04.2006, 08:22

Hoffen wir es mal. Aber so lange es sich nur um simple Hover Effekte handelt, kann ich damit leben dass der IE es nicht vernünftig anzeigt. Beim IE muss man eben Kompromisse eingehen

$traight-$hoota · 04.04.2006, 13:24

[oberstreber]ne[/oberstreber]

Javascript rulez
aber die verwendung von hovereffekten hängt ganz vom aufbau der seite ab. generell mache ich einfache effekte erstmal mit css, aber aufwendigere sachen mit js. auch wenn die seite eh ajax oder sonst irgendein javascript benötigt, kann man ja auch ohne probleme js nehmen.
btw. das topic geht doch nur über einfache farb- oder hintergrundbilld-änderungen und nicht aufwendigere js-effekte wie bei rico oder behaviour?

Chr!s · 09.09.2006, 21:54

Hm also es gibt schon eine Methode, die ohne JavaScript arbeitet (für einen Tooltip).:
HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type"        content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <meta http-equiv="Content-Style-Type"  content="text/css" />

 <title>CSS Spielchen #1 - Bild bei Mouseover</title>
 <link rel="stylesheet" href="userHover.css" media="all" />
</head>

<body>
<div id="main">
    <div class="box">
        <a href="#">
            Text<span>Text Text Text...</span>
        </a>
    </div>

    <div class="box">
        <a href="#">
            Erster <span>Linkbeschreibung.. Blubb</span>
        </a>
    </div>

    <div class="box">
        <a href="#">
            Bla<span>Blubb</span>
        </a>
    </div>

</div>
</body>
</html>

Und das CSS dazu:

Code:

#main {
    margin: 0 auto;
}

.box a:hover {
    background: none;
}

.box a span {
    display: none;
}

.box a:hover span, .box a:focus span {
    width: auto;
    color: #000;
    width: 200px;
    padding: 4px;
    display: block;
    background: #ffd;
    border: 1px solid #000;
    position: absolute;
}

Funktioniert bei mir sowohl im Firefox als auch im IE; Beim FF sogar druch das zusätzliche :focus auch, wenn der User mit Tabs durch die Links schaltet.

$traight-$hoota · 11.09.2006, 16:53

Problem bei dieser Lösung ist, dass du dabei kein sematisches HTML verwendest (weswegen auch dein Doctype falsch gesetzt ist) und die Webseite nur mit Stylesheets angesehen werden kann; ohne CSS (weshalb auch immer) ist der inhalt ziemlich sinnfrei...*g*

von der technischen umsetzung her sollte das tooltip mit ner variablen breite (zb 200px-400px) arbeiten. nachteile sind, dass das tooltip-fenster nicht relativ zum mauszeiger angezeigt wird (rechts unterhalb). Und beim überfahren des tooltips schließt sich das "fenster" im IE und im FF bleibt es bestehen, weil hover-effekte vererbt werden.

Chr!s · 12.09.2006, 00:36

Zitat:

Zitat von $traight-$hoota

Problem bei dieser Lösung ist, dass du dabei kein sematisches HTML verwendest (weswegen auch dein Doctype falsch gesetzt ist) und die Webseite nur mit Stylesheets angesehen werden kann; ohne CSS (weshalb auch immer) ist der inhalt ziemlich sinnfrei...*g*

von der technischen umsetzung her sollte das tooltip mit ner variablen breite (zb 200px-400px) arbeiten. nachteile sind, dass das tooltip-fenster nicht relativ zum mauszeiger angezeigt wird (rechts unterhalb). Und beim überfahren des tooltips schließt sich das "fenster" im IE und im FF bleibt es bestehen, weil hover-effekte vererbt werden.

Interessante Gegenargumente.
Nun ich denke aber dass ich mit einer Mischung aus JS und CSS dann doch gut wegkommen sollte (ich brauche für ein aktuelles Projekt einen recht, naja, großen Tooltip (mit Userbild, Userdaten usw, Kundenwunsch (ja Ben, ich weiß dass dich das Wort ankotzt, aber was solls, Kunde ist König

)) .. Deshalb auch mein Post hier

Bookworm · 12.09.2006, 12:29

xD^^
Naja ich mach eigentlich alles per CSS, nur einmal für n Referat in der Schule habe JS benutzt, weil ich mir nicht sicher sein konnte, das auf den Schulrechnern ein Browser ist, der CSS Hover auch außerhalb von <a> unterstützt...

Gruß
Booki

P.S. Wieso kann ich hier eigentlich nicht abstimmen?

Ben · 12.09.2006, 13:05

Weil die Umfrage beendet ist.
(Ich weiß, dass bei der Anzeige irgendwas schief gelaufen ist. Tut aber jetzt nichts mehr zur Sache!)

Umfrageergebnis anzeigen: Was nimmst du?
Javascript + CSS + (X)HTML.	2	10,00%
CSS + (X)HTML.	18	90,00%
Teilnehmer: 20. Du darfst bei dieser Umfrage nicht abstimmen

04.04.2006, 13:24	Nach oben #23
$traight-$hoota Johannes Müller Registriert seit: 15.09.2005 Ort: Königreich Flieden Beiträge: 550	[oberstreber]ne[/oberstreber] Javascript rulez aber die verwendung von hovereffekten hängt ganz vom aufbau der seite ab. generell mache ich einfache effekte erstmal mit css, aber aufwendigere sachen mit js. auch wenn die seite eh ajax oder sonst irgendein javascript benötigt, kann man ja auch ohne probleme js nehmen. btw. das topic geht doch nur über einfache farb- oder hintergrundbilld-änderungen und nicht aufwendigere js-effekte wie bei rico oder behaviour? __________________ Weißt Bescheid - Scheiß wie weit

11.09.2006, 16:53	Nach oben #25
$traight-$hoota Johannes Müller Registriert seit: 15.09.2005 Ort: Königreich Flieden Beiträge: 550	Problem bei dieser Lösung ist, dass du dabei kein sematisches HTML verwendest (weswegen auch dein Doctype falsch gesetzt ist) und die Webseite nur mit Stylesheets angesehen werden kann; ohne CSS (weshalb auch immer) ist der inhalt ziemlich sinnfrei...g von der technischen umsetzung her sollte das tooltip mit ner variablen breite (zb 200px-400px) arbeiten. nachteile sind, dass das tooltip-fenster nicht relativ zum mauszeiger angezeigt wird (rechts unterhalb). Und beim überfahren des tooltips schließt sich das "fenster" im IE und im FF bleibt es bestehen, weil hover-effekte vererbt werden. __________________ Weißt Bescheid - Scheiß wie weit

12.09.2006, 12:29	Nach oben #27
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	xD^^ Naja ich mach eigentlich alles per CSS, nur einmal für n Referat in der Schule habe JS benutzt, weil ich mir nicht sicher sein konnte, das auf den Schulrechnern ein Browser ist, der CSS Hover auch außerhalb von <a> unterstützt... Gruß Booki P.S. Wieso kann ich hier eigentlich nicht abstimmen? __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

12.09.2006, 13:05	Nach oben #28
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.516	Weil die Umfrage beendet ist. (Ich weiß, dass bei der Anzeige irgendwas schief gelaufen ist. Tut aber jetzt nichts mehr zur Sache!) __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

03.04.2006, 22:00	Nach oben #21
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Die Pseudoklasse :hover wird offiziell für alle Elemente unterstützt, der IE unterstützt dies allerdings bisher nur für <a>. Ob dieses Fehlverhalten im IE 7 korrigiert wird, weiß ich nicht.

04.04.2006, 08:22	Nach oben #22
xardias Wikinger Registriert seit: 02.03.2006 Ort: Aachen Beiträge: 189	Hoffen wir es mal. Aber so lange es sich nur um simple Hover Effekte handelt, kann ich damit leben dass der IE es nicht vernünftig anzeigt. Beim IE muss man eben Kompromisse eingehen

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Kann jeditorPane CSS Style-Sheets und javascript	mr.no	Allgemeine Java-Programmierung	3	14.01.2005 21:09