Foros del Web » Creando para Internet » CSS »

Eliminar el a:hover de un elemento de lista

Estas en el tema de Eliminar el a:hover de un elemento de lista en el foro de CSS en Foros del Web. Que tal un saludo =) Alguien me podria orientar en como eliminar el efecto a:hover de un elemento de lista? este es mi menu este ...
  #1 (permalink)  
Antiguo 22/09/2008, 08:57
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 15 años, 6 meses
Puntos: 0
Eliminar el a:hover de un elemento de lista

Que tal un saludo =)

Alguien me podria orientar en como eliminar el efecto a:hover de un elemento de lista? este es mi menu



este es el efecto de a:hover solo cambia la imagen de fondo



este es el codigo de mi menu (critiquen porfavor) =)

#menu
{

margin:120px 0 0 610px;
padding:0;
}
#menu ul
{
margin:0;
padding:0;
}

#menu ul li
{
border:.01px solid transparent;
background-image:url(../Neweb/Sources/Img/btn.png);
background-repeat:no-repeat;
height:40px;
width:114px;
display:block;
padding:0;
float:left;
text-align:left;
margin-right:.5em;
}


#menu li a
{
padding-top:15px;
padding-left:25px;
color:#fff;
font:bold 14px georgia;
text-decoration:none;
line-height: 1.3em;
display:block;
}


#menu li a:hover
{

background-image:url(../Neweb/Sources/Img/btna.png);
background-repeat:no-repeat;
height:27px;
width:114px;
}

-------------------------------------------------------------------------

LO que quiero hacer es eliminar el efecto mouseover de alguna de las pestañas =)

thnks
  #2 (permalink)  
Antiguo 22/09/2008, 09:04
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Eliminar el a:hover de un elemento de lista

Cita:
Iniciado por Darwinformatico Ver Mensaje
LO que quiero hacer es eliminar el efecto mouseover de alguna de las pestañas
Para que aparezca la pestaña activada?????

Si es eso, deberías agregar:

Cita:
#menu li .activado
{
background-image:url(../Neweb/Sources/Img/btna.png);
background-repeat:no-repeat;
height:27px;
width:114px;
padding-top:15px;
padding-left:25px;
color:#fff;
font:bold 14px georgia;
line-height: 1.3em;
display:block;
}
y en tu html:

Cita:
<li class="activado">tu enlace actuivo</a>
Espero te sirva
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 22/09/2008, 09:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Eliminar el a:hover de un elemento de lista

Cita:
<li class="activado">tu enlace actuivo</a>
Una pequeña corrección:

o bien

<li><a href="#" class="activado">tu enlace actuivo</a>

o bien

#menu li.activado

sin el espacio entre el li y el punto.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 22/09/2008, 09:49
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Eliminar el a:hover de un elemento de lista

Cita:
Iniciado por Mikmoro Ver Mensaje
Una pequeña corrección:

o bien

<li><a href="#" class="activado">tu enlace actuivo</a>

o bien

#menu li.activado

sin el espacio entre el li y el punto.
el que sabe, sabe....
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 22/09/2008, 09:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Eliminar el a:hover de un elemento de lista

Tonterías: es una cosa que tú también sabes pero ha sido un pequeño error

Bueno, la cuestión es que relamente creo que para hacer lo que quieres, Darwinformatico, necesitas una de estas opciones:

1.- dar una clase al botón activado, y entonces en la css ponerle que cuando pase el ratón quede igual que si no lo hiciera:

#menu li a.activado, #menu li a.activado:hover {
background-image:url(../Neweb/Sources/Img/btna.png);
background-repeat:no-repeat;
height:27px;
width:114px;
padding-top:15px;
padding-left:25px;
color:#fff;
font:bold 14px georgia;
line-height: 1.3em;
display:block;
}

aunque en este caso habrás de tener cuidado de contradecir todas las propiedades de tu otra declaración de hover que no quieres que se ejecuten para este enlace..

2.- dar una clase tanto a enlaces activados como desactivados

<li><a href="#" class="activo">enlace</a></li>
<li><a href="#" class="inactivo">enlace</a></li>

y ahora darles el hover sólo a los inactivos:

#menu li a.inactivo:hover {lo que sea}

No sé si es lo más correcto pero yo es lo que hago habitualmente.

Por cierto: creo que puede ser un poco problemático eso de que pongas el fondo a los "li" en lugar de los "a", y sin embargo cambies el fondo a los "a" al pasar el ratón.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 22/09/2008 a las 10:04
  #6 (permalink)  
Antiguo 22/09/2008, 10:08
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: Eliminar el a:hover de un elemento de lista

Cita:
Iniciado por DragonX Ver Mensaje
Para que aparezca la pestaña activada????
en ese caso lo que yo hago es darle un class diferente a cada li, y después un id al body según en que página esté. De esa forma no hay que modificar el html del menu en cada página y así se puede aprovechar php y poner el menu en un include

Ejemplo:
Código html:
Ver original
  1. <body id="blog">
  2. <ul>
  3. <li class="pagina1"><a href="#">Index</a>
  4. <li class="pagina2"><a href="#">Blog</a>
  5. <li class="pagina3"><a href="#">Foro</a>
  6. </ul>
  7. </body>
Código css:
Ver original
  1. #index .pagina1 a,
  2. #blog .pagina2 a,
  3. #foro .pagina3 a{el css del tab activo}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 22/09/2008, 10:24
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Eliminar el a:hover de un elemento de lista

Cita:
Iniciado por Mikmoro Ver Mensaje
Una pequeña corrección:

o bien

<li><a href="#" class="activado">tu enlace actuivo</a>

o bien

#menu li.activado

sin el espacio entre el li y el punto.
pero con el espacio si me anda, sin el espacio nop :S
  #8 (permalink)  
Antiguo 22/09/2008, 10:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Eliminar el a:hover de un elemento de lista

Nada, es que había una pequeña confusión:
si el html es

<li class="activado">tu enlace actuivo</a>

se cierra el "a" sin haberlo abierto, y faltaba la "a" de abrir, en cuyo caso, si fuera

<li class="activado"><a href="#">tu enlace actuivo</a>

el css sería

#menu li.activado a {

Pero si fuera:

<li><a class="activado" href="#">tu enlace actuivo</a>

el css sería

#menu li a.activado {

Es decir, según a qué le hayas puesto la clase, al "li" o al enlace. No sé cuál de los dos casos es el tuyo.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 22/09/2008, 10:58
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Eliminar el a:hover de un elemento de lista

ahora si funciono =) muchas gracias a los tres x)
  #10 (permalink)  
Antiguo 22/09/2008, 11:08
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Eliminar el a:hover de un elemento de lista

Cita:
Iniciado por webosiris Ver Mensaje
en ese caso lo que yo hago es darle un class diferente a cada li, y después un id al body según en que página esté. De esa forma no hay que modificar el html del menu en cada página y así se puede aprovechar php y poner el menu en un include

Ejemplo:
Código html:
Ver original
  1. <body id="blog">
  2. <ul>
  3. <li class="pagina1"><a href="#">Index</a>
  4. <li class="pagina2"><a href="#">Blog</a>
  5. <li class="pagina3"><a href="#">Foro</a>
  6. </ul>
  7. </body>
Código css:
Ver original
  1. #index .pagina1 a,
  2. #blog .pagina2 a,
  3. #foro .pagina3 a{el css del tab activo}
Excelente webosiris nunca se me hubiese ocurrido algo así, muy bien!
Gracias!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
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:13.