Buenas podría ver si me podríais ayudar con un problema que llevo mascando desde hace ya varios días y no consigo saber que le pasa creo que es un problema con el :hover o con la propiedad filter:alpha(opacity=50);.
La cosa es que tengo una pagina que cuando al veo con ff, opera, chrome, safary me funciona me hace el efecto de desplegarme un menú y en otra parte del código en unos input type="text" tengo especificado que cuando paso el ratón por encima cambien el estilo y al seleccionarle también lo haga y vuelvan a su estilo principal al deseleccionarle o al dejar de pasar el ratón por encima.
La cosa es que en ie9 no me funciona y no consigo saber porque mirar a ver si me echáis una mano por ahí gracias de antemano.
El código del menú desplegable
Cita: <div class="herramietas">
<div class="nav">
<li class="parent"><a href="#">Tareas</a>
<ul>
<li><a href="#">En Proceso</a></li>
<li><a href="#">Proyectos futuros</a></li>
<li><a href="#">Urgencias</a></li>
</ul>
</li>
<li><a href="#">Incidencias</a></li>
<li><a href="#">Notas</a></li>
<li><a href="#">Mensages</a></li>
</div>
</div>
El css del menu desplegable
Cita: .nav{
width:auto;
margin: 5% auto;
}
.nav li{
list-style: none;
position:relative; /* importante, para que el submenu tome la posición correcta*/
}
.nav li a{
text-decoration:none;
padding: 5px;
display:block;
}
.nav li a:hover{
color:#000;
background:#F8F8F8;
}
.nav li.parent:hover{
border:1px #ccc solid;
margin:-1px;
background:#F8F8F8;
}
.nav li li a{
width:250px;/*el ancho de los links del submenu, debe ser fijo, esto servirá para crear la animación mas adelante */
display:block;
}
/* aquí esta lo importante!! */
.nav li ul {
width: 220px;
margin:0;
display:none;
background:#F8F8F8;
border:1px #ccc solid;
position: absolute;
left: 100%;
top:-1px;
}
.nav li:hover ul {
display: block;
z-index:1000
}
.nav li ul {
width: 0; /*Cambiamos la linea */
margin:0;
/*display:none; Lo Eliminamos */
background:#F8F8F8;
border:1px #ccc solid;
position: absolute;
left: 100%;
top:-1px;
overflow:hidden; /* Para evitar Que se salgan los links */
/*z-index:-1000;/*El Submenu tiene que ir atras, para evitar que los 0 pixeles causen problema al :hover// Si se descomenta al pasar el raton al submenu desaparece*/
opacity: 0;
filter: alpha(opacity=0); /* Internet Explorer*/
-webkit-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s;/* Chrome, Safari*/
transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s;/* Navegadores CSS3 */
-moz-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s; /* Firefox 4 */
-o-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s; /*Opera */
}
.nav li:hover ul {
/*display:block; Lo Eliminamos */
width: 250px; /*La animación de 0 a 250px*/
opacity: 1;
filter: alpha(opacity=100);/* Internet Explorer*/
-webkit-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Chrome, Safari*/
transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Navegadores CSS3 */
-moz-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Firefox 4 */
-o-transition: oopacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Opera */
}
El codigo de los inputs
Cita: <div class="datos_club">
<h1>Datos del Club</h1>
<div class="nombre_datos_club" >
Nombre:
<input class="ttex" type="text" name="nombre" value="x" />
</div>
<div class="tlf_datos_club">
Tlf:
<input class="ttex" type="text" name="tlf" value=x" />
</div>
<div class="fax_datos_club">
Fax:
<input class="ttex" type="text" name="fax" value="x" />
</div><br /><br />
<div class="direccion_datos_club">
Direccion:
<input class="ttex" type="text" name="direccion" size="70" value="x" />
</div>
<div class="cp_datos_club">
CP:
<input class="ttex" type="text" name="cp" value="x" />
</div><br /><br />
<div class="localidad_datos_club">
Localidad:
<input class="ttex" type="text" name="localidad" value="x" />
</div>
<div class="provincia_datos_club">
Provincia:
<input class="ttex" type="text" name="provincia" value="x" />
</div><br /><br />
<div class="email_datos_club">
Email:
<input class="ttex" type="text" name="email" value="x" />
</div>
<div class="cif_datos_club">
CIF:
<input type="text" class="ttex" name="cif" value="x" />
</div>
</div>
css de los inoputs
Cita: .ttex{
border: none;
background: transparent;
color:#333333;
}
.ttex:hover {
border: thin #999999 outset;
filter:alpha(opacity=50);
-moz-opacity:.5;opacity:.5;
background: #FFFFFF;
color: #000000;
}
.ttex:focus {
border: thin #000000 solid;
background: #FFFFFF;
color: #000000;
}
.ttex:focus:hover {
border: thin #000000 solid;
filter:alpha(opacity=100);
-moz-opacity:1;opacity:1;
background: #FFFFFF;
color: #000000;
}
Gracias de nuevo haber si alguien me puede echar una mano u orientarme por donde resolverlo.