Foros del Web » Creando para Internet » CSS »

Div hover no se ve igual

Estas en el tema de Div hover no se ve igual en el foro de CSS en Foros del Web. Hola, quisiera hacer un hover con background a este div, pero no se como hacerlo, para que se vea igual en IE que en Firefox ...
  #1 (permalink)  
Antiguo 22/10/2008, 07:24
 
Fecha de Ingreso: mayo-2007
Mensajes: 68
Antigüedad: 10 años, 6 meses
Puntos: 0
Div hover no se ve igual

Hola, quisiera hacer un hover con background a este div, pero no se como hacerlo, para que se vea igual en IE que en Firefox y Safari:


<div style="z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 40px; text-align: center;color: #368304;" class="barra" id="barra"><div style="margin-top: 10px;"><a href="http://new-tools.addictools.com" title="New tools">New tools</a></div></div>

Alguien me ayuda?
  #2 (permalink)  
Antiguo 22/10/2008, 07:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div hover no se ve igual

Hola Zptweb
Hace unas fechas me encontré con un efecto rollover hecho a base de css únicamente. Quizás puedas adaptarlo a tus necesidades.
Este es el enlace, está en las faq´s.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 22/10/2008, 07:46
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Div hover no se ve igual

O bien puedes buscar lo que necesites en al baúl de recursos de nuestro amigo mik!

http://www.araudi.net/

  #4 (permalink)  
Antiguo 22/10/2008, 07:55
 
Fecha de Ingreso: mayo-2007
Mensajes: 68
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Div hover no se ve igual

Los rollovers para ie 6 no me sirven, y no quiero hacerlo mediante scripts.
  #5 (permalink)  
Antiguo 22/10/2008, 08:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div hover no se ve igual

Cita:
Iniciado por Zptweb Ver Mensaje
Los rollovers para ie 6 no me sirven, y no quiero hacerlo mediante scripts.
¿Has mirado bien?
Porque ni en ejemplo que te enlacé ni en los recordados por Dragón X hay ninguna llamada a ningún script ni se indica que sean usclusivamente para ie6
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 22/10/2008, 08:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div hover no se ve igual

No he entendido del todo ni tu primer mensaje ni esta respuesta tuya. En primer lugar, quita todos los estilos que asignas directamente en la etiqueta y pónselos bien a la clase o al id que asignas al div. En segundo lugar, veo que sabes que hover sólo te funcionará para los elementos "a" en IE6, por lo que, lo que debes hacer es que realmente el color de fondo esté asignado al enlace, y mediante display:block, width: 100% y height: 100%, el enlace ocupe en realidad todo el tamaño del div.

Si te explicas mejor y pones un ejemplo claro será más fácil ayudarte.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 22/10/2008, 08:53
 
Fecha de Ingreso: mayo-2007
Mensajes: 68
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Div hover no se ve igual

Bien, quiero que con este código

<div style="z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 40px; text-align: center;color: #368304;" class="barra" id="barra"><div style="margin-top: 10px;"><a href="http://new-tools.addictools.com" title="New tools">New tools</a></div></div>

Lo que ves de la etiqueta style, quede en un class, y ese class vaya asignado a un enlace, para que cuando clickes en el div ( ya sea color de fondo o enlace), cambie de color, y al mismo tiempo, siga el enlace.

Por ejemplo, ahora, como veis a continuación, con esto si me coje el enlace todo el div, pero no puedo aplicar efecto rollover, o no me sale:

<a href="http://new-tools.addictools.com" title="New tools" class="stup"><div style="z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 40px; text-align: center;color: #368304;" class="stup"><div style="margin-top: 10px;">New tools</div></div></a>

Con este css no puedo aplicarle el efecto hover, sí cuando no está hover:

a.stup div {
z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
color: white;
display: block;
}

a.stup div a: hover {
z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
color: black;
display: block;
}

Saludos.

Última edición por Zptweb; 22/10/2008 a las 08:59
  #8 (permalink)  
Antiguo 22/10/2008, 10:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div hover no se ve igual

Lo siento, pero con la clase .stup nunca me he llevado muy bien.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 22/10/2008, 10:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div hover no se ve igual

En fin.

No entiendo lo que buscas con los div, pero por lo que creo, esto te es más que suficiente:

HTML:
<a href="http://new-tools.addictools.com" title="New tools" class="stup">New tools</a>

CSS:
a.stup {display: block;
line-height: 40px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
outline: none;
float: left;
background-color: #9fcf66;
width: 110px;
position: relative;
height: 40px;
text-align: center;
text-decoration: none;
color: #fff;
}
a.stup:hover {color: #000;
background-color: #00f;
}
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 22/10/2008, 11:58
 
Fecha de Ingreso: mayo-2007
Mensajes: 68
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Div hover no se ve igual

Con este código, sí se ve bien en ie 7, firefox y safari, pero en ie 6, sale justo en el bottom del div, un margen de 2 o 3 px que no está rellenado con el background cuando se hace hover:

div.barra a:hover {

font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
background-color: #60b12b;
color: white;}

div.barra a {
padding-top: 10px;
font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 30px; text-align: center;color: #368304;}

Saludos.
  #11 (permalink)  
Antiguo 22/10/2008, 12:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div hover no se ve igual

¿Cómo? ¿quieres mirar esto con IE6?

http://www.araudi.net/forosdelweb/Zptweb.html

EDITO: Ah, vale, ahora veo que es que no has leido mi mensaje con el código.
__________________
Visita mi nueva web idplus.org
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 07:14.