CSS Hover in IE

CSS Hover in IE - Wie? (30 Beiträge, 245 Mal gelesen)

Du bist nicht angemeldet. [ Login/Registrieren ]

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

Ich surfe mit IE7 (bin FF-Verweigerer...und stolz darauf) und bei mir klappts ohne Probs. Ich fahre auf den Punkt, dann erscheint das Bild.

lg reisi

"Was kümmert mich der Schiffbruch der Welt, ich weiß von nichts, als meiner seligen Insel." - Friedrich Hölderlin

Ah, sehr gut zu wissen, dass es zumindest mit der Version 7 kompatibel ist.
Schön wäre natürlich, wenn es mit der Version 6 auch funktionieren würde.

IE 6.0.2900: Nein, es funktioniert nicht.
emefge
Infosauger
_____________________________________________________________________________

Weil die Lichtgeschwindigkeit höher als die Schallgeschwindigkeit ist, hält man viele Leute für helle Köpfe bis man sie reden hört.

"Bekomme ich bei Ihnen so einen ganz kleinen Lötkolben zum CPU reparieren?"

Wieso Realität? Ich hab doch verdammt noch mal was Besseres zu tun!

http://www.peterkroener.de/2007/07/11/drop-down-menue-mit-css-und-fast-ohne-javascript/

nico

„Worüber man nicht sprechen kann, darüber soll man schweigen.“

Diese Lösung bedient sich auch JS, funktioniert aber leider bei mir nicht.
(csshover.htc im selben Verzeichnis wie .html)
Code hinzugefügt:

<!--[if IE]>
<style type="text/css" media="screen">
body { 
behavior:url("./csshover.htc"); 
}
</style>
<![endif]-->

http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers_(csshover.htc).html

Mehr als eine Warnung vom IE, dass er ein eventuell bösartiges Skript geblockt hat, bekomme ich nicht (auch nach dem laden des "bösen" Skripts).

Vielleicht liegt es daran?

Users with SP2 installed may not see it working correctly, because webservers have to send htc files with the mime-type set to text/x-component.

04.09.2007, 22:53 Uhr - Editiert von kakazza, alte Version: hier

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

Ah, das klingt sehr vielversprechend, werde ich morgen testen, wenn ich wieder CSS und HTML sehen

Am besten wird wohl die Version mit dem Punkt auf dem größeren Bild, werde aber trotzdem vorher edit2 versuchen.

Melde mich dann morgen zurück, danke :D

Also ersetzten schaffe ich jetzt, das ist schonmal viel wert, danke

Aber die edit2-Version scheint nicht so ganz zu klappen, ich denke mein Code ist etwas falsch, da mir nicht klar ist, wie ich das visibility: hidden; auf visible triggern soll. (Ein unsichtbares Bild zu klicken/drüberzu'hovern' ist nicht so einfach :D

a#p1hov {
height: 113px;
width: 170px;
display: block;
background-image: url("./bilder/P1_over.gif");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 147px;
left: 109px;
visibility: hidden;
}
a#p1hov:hover {
height: 113px;
width: 170px;
display: block;
background-image: url("./bilder/P1_over.gif");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 147px;
left: 109px;
visibility: visible;
}

Also ersetzten schaffe ich jetzt, das ist schonmal viel wert, danke

			a#p1hov {
				height: 113px;
				width: 170px;
				display: block;
				background-image: url("./bilder/P1_over.gif");
				background-repeat: no-repeat;
				background-position: center center;
				position: absolute;
				top: 147px;
				left: 109px;
				visibility: hidden;
				}
			a#p1hov:hover {
				height: 113px;
				width: 170px;
				display: block;
				background-image: url("./bilder/P1_over.gif");
				background-repeat: no-repeat;
				background-position: center center;
				position: absolute;
				top: 147px;
				left: 109px;
				visibility: visible;
				}

Und danke für die - endlich mal verständliche - Anleitung. Du bist der erste, der tatsächlich weiß von was er redet anstatt nur "ja, mach das mit , das sollte gehen" zu sagen.

Edit:
http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers_working_in_IE.html
^-- Hier mal die Version mit dem Austauschen, lustig ist allerdings, wie Firefox und IE die Positionierung anders interpretieren, kA warum.

Edit2:
Ich habe jetzt IE6 und IE7 parallel laufen (dank http://tredosoft.com/IE7_standalone ) und es sieht so aus: IE6: verschoben, warum auch immer, IE7: perfektes Ergebnis.

Die Fragen sind also:
*) Wie lege ich die zwei 's übereinander, um eine 2. Version zu haben (mit visibility)
*) ~~Gibt es einen Universalcode, damit der IE6 das auch checkt, oder soll ich einfach auf eine if condition für den IE6 verwenden?~~

Edit3:
So viele Edits... kommt davon wenn man Nachts arbeitet und dann alle 3 Minuten ein neues Ergebnis hat >_>
Habe nun das ganze für den IE6 4 Pixel nach unten verschoben. (Warum auch immer der IE6 das macht)
http://members.chello.at/alphaman/repairing_non_broken_code_for_inferior_browsers_working_in_IE_03.html

06.09.2007, 04:20 Uhr - Editiert von kakazza, alte Version: hier

Scheint soweit ja zu funktionieren.

Aber als letzten Tipp, damit es perfekt wird, und weil die Ladezeit beim Mouseover nerven kann: Gib beide Grafiken in ein (1) Bild, setz bei beiden (A und A:Hover) das selbe Bild als Background-image, und positioniere es in beiden fällen mit Background-Position.

Hat den Vorteil, dass der Browser nur ein Bild laden muss, und beim Mouseover gibts keine Verzögerung.

Also wenn z.b. dein erstes Bild 300px hoch ist, dann ist auch dein A 300px hoch, und Background-position ist vertikal 0px, und horizontal center.
Im unteren Teil des Bildes, auf den nächsten 300px, ist dann das Hover Bild, dass du im A:Hover teil letztendlich mit der background-position vertikal 300px, horizontal center enthüllst, also den BG eigentlich nur nach unten "scrollst".
--
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

Verstehe ja, aber sollten die Bilder nicht sowieso schon geladen werden? Denn display ist ja auch block; und nicht auf none;. Nur die visibility ist auf hidden;.
Von daher sind ja beide Bilder schon "da".

Mit Bildern würde ich gerne nicht so viel herumarbeiten, da ich kein Bildbearbeitungsprogramm habe. Das mit dem Punkt im großen Bild hat ein Freund für mich erledigen müssen.

Ich werde mir die Lösung aber auf jeden Fall notieren.

Trotzdem will ich vorher noch unbedingt das schaffen, dass ich die visbility mit einem Hover von hidden; auf visbile; setzen kann, das könnte in Zukunft recht nützlich sein. Weißt du da Rat?

So wie ich das zur Zeit geschrieben habe, habe ich zwei verschiedene Tags mit unterschiedlicher ID. Und ohne JS kann ich in CSS ja nicht die Attribute von einem Tag beflussen, wenn ich mich in einem anderen befinde.

Und zwei background-images kann ich ja in einem Tag nicht laden, das eine visible (dot) und dass andere hidden (großes Bild)

Verstehe ja, aber sollten die Bilder nicht sowieso schon geladen werden? Denn
display ist ja auch block; und nicht auf none;. Nur die visibility ist auf
hidden;.
Von daher sind ja beide Bilder schon "da".

Schon, aber das :Hover Bild wirst erst geladen, wenn du den Hover auch tatsächlich ausführst - unabhängig von display oder visibility.

Trotzdem will ich vorher noch unbedingt das schaffen, dass ich die visbility
mit einem Hover von hidden; auf visbile; setzen kann, das könnte in Zukunft
recht nützlich sein. Weißt du da Rat?

Was funktioniert denn nicht? Die visiblity sollte man in einem Hover schon ändern können...obwohl...wird das Hover überhaupt ausgeführt, wenn das nicht nicht visible ist? Sollte schon der Fall sein, kann ich aus dem Kopf aber jetzt nicht beantworten.

So wie ich das zur Zeit geschrieben habe, habe ich zwei verschiedene Tags mit
unterschiedlicher ID. Und ohne JS kann ich in CSS ja nicht die Attribute von
einem Tag beflussen, wenn ich mich in einem anderen befinde.

Doch, könnte klappen, da gehts dann aber wirklich in die Tiefen von CSS.
Mit dem * Selektor kann man Elemente Treffen, die sich zwischen 2 anderen befinden.

Angenommen du hast nun folgenden aufbau
Body
A-Tag-1
A-Tag-2

Dann könnte evtl. folgendes funktionieren, um den A-Tag-1 beim Hovern von A-Tag-2 zu ändern:

BODY * A-Tag-2:Hover { /*statements*/ }

Das trifft wohlbemerkt alles, was zwischen BODY und A-Tag-2 ist.

Sorry für das viele "könnte" und "sollte", aber mir fehlt die Zeit um das jetzt zu testen, vielleicht ists aber einen Versuch wert.

edit1

Jetzt noch eine völlig andere Idee. Du hast im A-Tag immer noch die Möglichkeit, ein Bild zu positionieren, zu welchem Zweck auch immer. Das blendest du per Default aus (A IMG display none), und beim A:Hover ein (A:Hover IMG { display: ...} ).

Somit könntest du sowohl ein background-image beim A:Hover definieren, als auch ein inline-image, das beim Hover erscheint, und dieses im A-Tag positionieren.

Beispiel:
A-TAG mit Hintergrund dem Bild, darin ein display:none Image.

Beim A-TAG:Hover setzt du display: block beim Bild.

Für das Bild selbst setzt du noch ein IMG { position: absolute; } mit genauer Positionierung, dann kannst du beim A:Hover den IMG Tag triggern, und das Bild nach belieben positionieren.
--
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

06.09.2007, 15:02 Uhr - Editiert von Dr. Watson, alte Version: hier

es geht noch einfacher: http://www.tapirpirates.net/css_mouseover/

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;CSS-Mouseover&lt;/TITLE&gt;
&lt;style type="text/css"&gt;

.mouseover {
	position:			absolute;
	overflow:			hidden;
	background-repeat:	no-repeat;
}

.imageOne {
	background-image:	url( 'image.gif' );
	width:				200px;
	height:				200px;
	left:				100px;
	top:				100px;
}

.imageTwo {
	background-image:	url( 'image2.gif' );
	width:				100px;
	height:				100px;
	left:				400px;
	top:				400px;
}


A.mouseOver {
	background-position:left top;
}

A.mouseOver:hover {
	background-position:left bottom;
}


&lt;/style&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;a href="#" style="background-image:url('image.gif');"&gt;normaler textlink&lt;/a&gt;
&lt;a class="mouseover imageOne" href="#"&gt;&lt;/a&gt;
&lt;a class="mouseover imageTwo" href="#"&gt;&lt;/a&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

anmerkung:
wollts nur mal ausprobieren, obs so auch geht. und voilá: weder internetzexplorer 6 noch ff machen faxen. sonstige browser hab ich nicht ausgetestet.

arbeitsweise der methode:
- bild ist ein hintergrundbild, dessen ausrichtung bei mouseover einfach verschoben wird

vorteil an der methode:
- relativ einfach. für einen neuen mouseover-effekt musst nur eine neue css-klasse erstellen. alternativ kannst sogar mit einer kombination aus klassen und style-tags arbeiten, dann wärs glaub ich ganz bequem. add: habs grad ausprobiert, funkt
- es ist nur ein bild, welches beim start sofort geladen wird

nachteil der methode:
- bild und mouseoverbild müssen die selbe größe besitzen
- nicht sonderlich elegant, die beiden bilder einfach zu einem bild übereinanderzustückeln

sakarament, die ganze zeit ein broken file oben gehabt

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