2008-08-31 5 views
7

Was ist die einfachste und eleganteste Art, die Pseudo-Klasse für nicht verankerte Tags in IE6 zu simulieren?IE 6 CSS-Hover nicht verankern Tag

Ich versuche speziell den Cursor in diesem Fall zu dem eines Zeigers zu ändern.

Antwort

3

Ich würde sagen, dass die einfachste Methode wäre, onmouseover/out Javascript-Funktionen hinzuzufügen.

+0

"speziell versucht, den Cursor zu ändern" erfordert kein JavaScript.Verwenden Sie einfach diese CSS-Regel: Cursor: Zeiger; – Liam

+0

Aber "simulieren die Pseudo-Klasse Hover für Nicht-Anchor-Tags in IE6" einfach, und das ist die Frage, die ich beantwortete. Wenn Menschen nach einer Antwort auf "IE non-Anchor hover" suchen, wird "use 'cursor: pointer'" überhaupt nicht hilfreich sein. –

+0

Die jQuery-Implementierung dieser Lösung finden Sie unter http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/ Dieses Snippet kann problemlos für die Verwendung mit geändert werden andere JavaScript-Frameworks oder einfaches JavaScript. ein großer Fortschritt dieses Skript ist, dass es keine HTC, also keine ungültige CSS und wird nur von ie6 analysiert und ausgeführt werden, damit Sie keine Leistungsdifferenz in anderen Browsern bemerken. –

12

Ich denke, der einfachste Weg ist die hover.htc Ansatz verwenden. Sie fügen zu Ihrer Website der hover.htc Datei, es dann in Ihrem Stylesheet verweisen:

body { behavior:url("csshover.htc"); } 

Wenn Sie die Dinge so sauber wie möglich halten möchten, können Sie IE bedingte Kommentare verwenden, so dass Zeile nur Benutzer gemacht wird, mit IE6.

1

Ein anderer Ansatz, je nachdem, was das Element ist, besteht darin, einen Nicht-Link-Anker hinzuzufügen und seine Anzeige auf Block zu setzen. Setzen Sie den Anker entweder innerhalb oder in der Umgebung des Elements, auf dem das Pseudo-Hover-Verhalten aktiviert sein soll.

0

Ich mochte den mouseover/out am besten, da ich eigentlich sowieso schon das Bild tauschen musste. Ich hätte wirklich darüber nachdenken sollen, dies mit Javascript zu tun.

Danke für die schnellen Antworten.

@Joseph

Danke für diesen Link. Ich hatte noch nie zuvor von dieser Technik gehört und mochte die Idee wirklich.

Ich werde das definitiv ausprobieren und sehen, wie ich damit auskommen.

1

Abgesehen:

Ich brauche eigentlich schon das Bild sowieso

Achten Sie darauf, einen Blick auf Image Sprites zu tauschen. Manchmal ist es viel schöner, ein Bild zu verwenden und das Bild zu verschieben, um dann zwei separate Bilder zu verwenden und zwischen ihnen hin- und herzuwechseln. Meiner Erfahrung nach war es sehr nett, wenn ein Benutzer mit ihm interagiert, manchmal ist es ein Vorteil, dass es eine einzige Anfrage für das 1 Bild und dann mehrere Anfragen für mehrere Bilder gibt.

6

In Bezug auf Ihre Anfrage - Ich bin speziell versucht, den Cursor in dieser Instanz zu der eines Zeigers zu ändern - der einfachste Weg ist, cursor:pointer in Ihrem CSS anzugeben. Ich glaube, Sie werden feststellen, dass 6.

in IE funktioniert

dies versuchen zu überprüfen (wo div ein beliebiges Element sein kann):

<div style="background:orange; cursor:pointer; height:100px; width:100px;"> 
    Hover 
</div> 
+0

Ich habe Sie gewählt, weil Sie die Frage gelesen haben, die ein anderer Ansatz zu den anderen Benutzern scheint :) – Liam

+0

Oh, und ich habe dies in IE6, IE7, Firefox 3, Safari und Google Chrome getestet und natürlich funktioniert es perfekt. – Liam

3

Eine weitere Alternative, die viele weitere Probleme auf einmal beheben wird, ist die Verwendung IE7.js.