Re: CSS Hover in IE - Wie?
Geizhals » Forum » Programmierung » CSS Hover in IE - Wie? (30 Beiträge, 272 Mal gelesen) Top-100 | Fresh-100
Du bist nicht angemeldet. [ Login/Registrieren ]
CSS Hover in IE - Wie?
04.09.2007, 21:22:44
Hi,

Ich bastle gerade ein bisschen herum und habe folgende Situation:
Ich verwende Hovers, um Bilder erscheinen zu lassen, wenn ich über ein anderes Bild mit der Maus fahre.

Sieht dann so aus, sofern man einen Browser wie Opera, Safari, Firefox..., aber nicht den IE verwendent:
http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers.html
(Das Original beinhaltet natürlich mehr Elemente, das ist nur ein Teil als Biespiel)

Nun funktioniert das wie erwähnt nicht im IE6, wie es um den IE7 steht, weiß ich nicht. Ich habe aber erfahren, dass der IE :hover schon unterstütz, jedoch nur mit Elementen.

Nun endlich die Frage:
Kann ich den Code umschreiben, oder einfach ganz anderen CSS Code verwenden, um den gewünschten Effekt in IE und Gecko Browsern zu verwenden?
(Eine Konkrete Antwort habe ich bissher nicht bekommen, nur Gemurmel über Sachen wie 'a { background-image: url(URL); } a:hover { background-image... } das mich noch nicht weitergebracht hat :))


Danke im *TRÖT*



Randnotizen:
*) Nein, JS ist keine Lösung, darum geht es mir im Grunde.
*) Der Punkt wird nicht einfach durch ein größeres Bild ersetzt, sondern das Bild mit dem Text legt sich darüber (transparentes gif)

Hier der Punkt:

und das Bild, das sich über den Punkt legt:


*) NEIN, der Text in den .gifs soll nicht lesbar sein, also keine Kommentare darüber.

04.09.2007, 22:03 Uhr - Editiert von kakazza, alte Version: hier
Antworten PM Alle Chronologisch
 
Melden nicht möglich
.  Re: CSS Hover in IE - Wie?  (reisi1990 am 04.09.2007, 22:06:12)
..  Re(2): CSS Hover in IE - Wie?  (kakazza am 04.09.2007, 22:15:19)
...  Re(3): CSS Hover in IE - Wie?  (Infosauger am 06.09.2007, 10:39:30)
.  Re: CSS Hover in IE - Wie?  (nico am 04.09.2007, 22:14:16)
..  Re(2): CSS Hover in IE - Wie?  (kakazza am 04.09.2007, 22:49:09)
.
Re: CSS Hover in IE - Wie?
04.09.2007, 22:54:39
Wenn man den IE und seine Fehler kennt, gehört das zum Standardwerkzeug, also keine große Hexerei.

Gehe vor wie folgt:

Der "Punkt" wird ein A-Tag mit display: block; width: 12px; height: 12px (eben die Abmaße deines Punkt-Bildes), und als background-image: deinen Punkt gesetzt, background-repeat auf no-repeat, background-position auf center center.

Dann definierst du für denen A-Tag die Pseusoklasse :Hover, und in der gibst du dann die neuen Daten an: width: 400px; height: 400px; background-image: das große Bild eben, der Rest kann gleich bleiben.

Die IMG Tags kannst du dir sparen, werden nicht benötigt. Da der IE<7 :Hover nur bei Links kennt, nimm halt einfach A-Tags her, und formatiere diese via CSS um.
Getestet hab ich obiges nicht, aber es sollte klappen.

edit
Sehe erst jetzt, dass der Punkt nicht ersetzt werden soll - dann mach den Punkt eben aufs größere Bild drauf.
Sollte anders auch gehen, die verschachtelten CSS Only Menüs sind im Prinzip das selbe, nur halt mit Menüebenen, anstatt Beschreibungen zu Punkten.

edit2
Möglichkeit 3 wäre dann, 2 A-Tags übereinander zu positionieren, wobei der Punkt kein :Hover kennt, das große Bild per default auf visibility: hidden aber display: block gesetzt ist, und beim Hover übers große Bild, wird es per visibility: visible; sichtbar gemacht, und dank des transparenten GIFs scheint der Punkt darunter durch. Musst du dann noch mit absoluter Positionierung, und / oder dem z-index arbeiten.
--
DiTech postete:
Sie haben offensichtlich 7mal mit dem Goldadler positive Erfahrung gemacht. Bei dieser Menge an Glück sollten Sie Lotto spielen.

GHF Watcher 1.3 - Firefox Erweiterung für Geizhals User
04.09.2007, 22:58 Uhr - Editiert von Dr. Watson, alte Version: hier
Antworten PM Alle Chronologisch Zum Vorgänger
 
Melden nicht möglich
..  Re(2): CSS Hover in IE - Wie?  (kakazza am 04.09.2007, 23:45:05)
..  Re(2): CSS Hover in IE - Wie?  (kakazza am 06.09.2007, 02:30:29)
..  Re(2): CSS Hover in IE - Wie?  (kakazza am 06.09.2007, 02:30:45)
...  Re(3): CSS Hover in IE - Wie?  (Dr. Watson am 06.09.2007, 10:18:34)
....  Re(4): CSS Hover in IE - Wie?  (kakazza am 06.09.2007, 14:46:00)
.....  Re(5): CSS Hover in IE - Wie?  (Dr. Watson am 06.09.2007, 14:55:19)
.  Re: CSS Hover in IE - Wie?  (stefs am 15.09.2007, 03:57:33)
..  Re(2): CSS Hover in IE - Wie?  (stefs am 18.09.2007, 16:32:36)
 

Dieses Forum ist eine frei zugängliche Diskussionsplattform.
Der Betreiber übernimmt keine Verantwortung für den Inhalt der Beiträge und behält sich das Recht vor, Beiträge mit rechtswidrigem oder anstößigem Inhalt zu löschen.
Datenschutzerklärung