Eliminar el a:hover de un elemento de lista

Darwinformatico · #1 (**permalink**) 22/09/2008, 08:57

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

DragonX · #2 (**permalink**) 22/09/2008, 09:04

Cita:

Iniciado por Darwinformatico

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

Mikmoro · #3 (**permalink**) 22/09/2008, 09:47

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.

DragonX · #4 (**permalink**) 22/09/2008, 09:49

Cita:

Iniciado por Mikmoro

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....

Mikmoro · #5 (**permalink**) 22/09/2008, 09:55

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.

webosiris · #6 (**permalink**) 22/09/2008, 10:08

Cita:

Iniciado por DragonX

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<body id="blog">
<ul>
<li class="pagina1"><a href="#">Index</a>
<li class="pagina2"><a href="#">Blog</a>
<li class="pagina3"><a href="#">Foro</a>
</ul>
</body>

Código css:

Ver original#index .pagina1 a,
#blog .pagina2 a,
#foro .pagina3 a{el css del tab activo}

Darwinformatico · #7 (**permalink**) 22/09/2008, 10:24

Cita:

Iniciado por Mikmoro

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

Mikmoro · #8 (**permalink**) 22/09/2008, 10:37

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.

Darwinformatico · #9 (**permalink**) 22/09/2008, 10:58

ahora si funciono =) muchas gracias a los tres x)

DragonX · #10 (**permalink**) 22/09/2008, 11:08

Cita:

Iniciado por webosiris

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<body id="blog">
<ul>
<li class="pagina1"><a href="#">Index</a>
<li class="pagina2"><a href="#">Blog</a>
<li class="pagina3"><a href="#">Foro</a>
</ul>
</body>

Código css:

Ver original#index .pagina1 a,
#blog .pagina2 a,
#foro .pagina3 a{el css del tab activo}

Excelente webosiris nunca se me hubiese ocurrido algo así, muy bien!
Gracias!