2008-08-31 10 views
7

¿Cuál es la forma más simple y elegante de simular la seudoclase hover para las etiquetas que no son de anclaje en IE6?IE 6 CSS Hover non Anchor Tag

Estoy tratando específicamente de cambiar el cursor en este caso al de un puntero.

Respuesta

3

Yo diría que el método más simple sería agregar onmouseover/out funciones de Javascript.

+0

"tratando específicamente de cambiar el cursor" no requiere JavaScript.Simplemente use esta regla CSS: cursor: puntero; – Liam

+0

Pero "simular la pseudoclase de flotación para las etiquetas que no son de anclaje en IE6" simplemente lo hace, y esa es la pregunta que estaba respondiendo. Cuando las personas buscan una respuesta a "IE no anchor hover", "use 'cursor: puntero'" no va a ser de ninguna utilidad. –

+0

la implementación jQuery de esta solución se puede encontrar en http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/ Este fragmento se puede modificar fácilmente para su uso con otros frameworks de JavaScript o JavaScript simple. un gran adelanto de este script es que no requiere htc, por lo que no hay css no válido y se analizará y ejecutará solo por ie6, por lo tanto, no notará ninguna diferencia de rendimiento en otros navegadores. –

12

Creo que la manera más simple es utilizar el enfoque hover.htc. Agrega el archivo hover.htc a su sitio y, a continuación referencia a él en su hoja de estilos:

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

Si desea mantener las cosas lo más limpio posible, puede utilizar IE comentarios condicionales de manera que solamente se representa la línea a los usuarios IE6.

1

Otro enfoque, dependiendo de lo que el artículo es, es agregar un anclaje no vinculante y configurar su pantalla para bloquear. Coloque el anclaje dentro o alrededor del elemento en el que desea que aparezca el comportamiento de pseudovuelo.

0

Me gustó el mouseover/out mejor ya que en realidad ya necesitaba cambiar la imagen. Realmente debería haber pensado en hacer esto con javascript para empezar.

Gracias por las respuestas rápidas.

@Joseph

Gracias por ese enlace. Nunca antes había escuchado sobre esta técnica y realmente me gustó la idea.

Definitivamente intentaré eso y veré cómo me va con él.

1

Aparte:

que en realidad ya se necesita para cambiar la imagen de todos modos

Asegúrese de echar un vistazo a Image Sprites. A veces es mucho mejor utilizar una imagen y "cambiar" la imagen para luego usar dos imágenes separadas y "alternar" o "intercambiar" entre ellas. En mi experiencia, ha sido muy agradable cuando, a medida que el usuario interactúa, a veces es una ventaja que haya una única solicitud para la imagen 1 y luego múltiples solicitudes de imágenes múltiples.

6

En cuanto a su solicitud - estoy tratando específicamente para cambiar el cursor en este caso a la de un puntero - la forma más fácil es especificar cursor:pointer en el CSS. Creo que usted encontrará que funciona en IE 6.

Pruebe lo siguiente para verificar (donde div puede ser cualquier elemento):

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

Lo voté porque leyó la pregunta, que parece ser un enfoque diferente para los otros usuarios :) – Liam

+0

Ah, y lo probé en IE6, IE7, Firefox 3, Safari y Google Chrome y, por supuesto, funciona perfectamente. – Liam

3

Otra alternativa que solucionará muchos más problemas de una vez es usar IE7.js.