Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/05/2013, 18:37
Avatar de berkeleyPunk
berkeleyPunk
 
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 3 meses
Puntos: 22
Sonrisa No puedo ejecutar HOVER con filtros IE

Tengo un div con una rotación de 20°.
La idea es que cuando se le pase el cursor encima, el div muestre cierta transparencia.
Código HTML:
Ver original
  1. <div class="A">Texto</div>

Código CSS:
Ver original
  1. .A {
  2.     position:relative;
  3.     top:0px;
  4.     left:0px;
  5.     width:200px;
  6.     height:70px;
  7.     background-color:green;
  8.     color:white;
  9.     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256686, M21=0.3420201433256686, M22=0.9396926207859084, SizingMethod='auto expand');}
  10.  
  11. .A:hover {filter:alpha(opacity=50);}


Si se prueba esto en IE8, se verá que el efecto hover hace un extraño: pone transparencia al div, sí, pero también muestra el div sin rotación, o sea, en horizontal.

¿En qué momento el hover le dice al div que la rotación es 0, o que quite la rotación?

Ya probé añadir al hover el filtro IE para la rotación:

Código CSS:
Ver original
  1. filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256686, M21=0.3420201433256686, M22=0.9396926207859084, SizingMethod='auto expand');

Esto parece buena idea. La bronca es que cierra un hoyo y abre otro.
Añadiendo la rotación al hover, sí, al pasar el cursor encima del div, éste mantiene su rotación de 20°, pero ya no funciona la transparencia.

Parece como si no se pudiera aplicar al mismo tiempo dos filtros IE a un elemento.

¿Cómo hacer que el filtro de transparencia y el filtro de rotación en IE funcionen al mismo tiempo?


Última edición por berkeleyPunk; 31/05/2013 a las 18:46