Foros del Web » Creando para Internet » CSS »

Background-position en hover no funciona con Opera y FF

Estas en el tema de Background-position en hover no funciona con Opera y FF en el foro de CSS en Foros del Web. Hola! Estoy trabajando coon una modificación del menu circular de metal-ize y tengo problemas con el efecto -hover de los iconos donde debe de aparecer ...
  #1 (permalink)  
Antiguo 21/08/2008, 19:42
Avatar de Threepwood  
Fecha de Ingreso: febrero-2002
Ubicación: Argentina
Mensajes: 906
Antigüedad: 22 años, 1 mes
Puntos: 4
Background-position en hover no funciona con Opera y FF

Hola!


Estoy trabajando coon una modificación del menu circular de metal-ize y tengo problemas con el efecto -hover de los iconos donde debe de aparecer un circulo verde de fondo.

Explico: tengo una imagen gif de 45x 90 con dos iconos: el estado normal y el hover. El codigo es el siguiente:

Código HTML:
 ul#menu a.menitem:link, ul#menu a.menitem:visited {
        background-position: left bottom;
        opacity: .7;
    }
    
    ul#menu a.menitem:hover, ul#menu a.menitem:active,  {
        background-position: left top;
        background-color: transparent;
        opacity: .9;
    }
Y el html es así:

Código HTML:
<ul id="menu">
    <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li></ul> 
El probema es que el efecto si funciona en IE (el fondo se mueve) pero no en Opera ni Firefox... y bueno, el menu circular si se ve bien en todos los navegadores... no sé a que pueda deberse.

Alguna idea?

Gracias
__________________
Equívocos sin importancia
  #2 (permalink)  
Antiguo 22/08/2008, 00:14
Avatar de acoevil  
Fecha de Ingreso: julio-2008
Ubicación: localhost/colombia/sevillaValle.php
Mensajes: 1.123
Antigüedad: 15 años, 7 meses
Puntos: 32
Respuesta: Background-position en hover no funciona con Opera y FF

IE:

filter: alpha(opacity=50)

Firefox:

opacity: .5

Mozilla:

-moz-opacity:0.5

El siguiente ejemplo funciona en los dos navegadores:

<style type=”text/css”>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>

<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco" width="100" height="109"></p>


CREO QUE ESO ES LO QUE BUSCAS
SI LO QUE INTENTAS CON EL EFECTO OPACITY ES DIFERENTE LA SINTAXIS EN LOS 2 NAVEGADORES
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:35.