Foros del Web » Creando para Internet » CSS »

¿2 efectos diferentes para a:hover?

Estas en el tema de ¿2 efectos diferentes para a:hover? en el foro de CSS en Foros del Web. li a:hover{ background-color: green; border-color: #000; border-bottom: solid 1px #6CC; font-weight: bold; } Si tengo mas de una lista, y no quiero que todas tengan ...
  #1 (permalink)  
Antiguo 02/09/2009, 11:54
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 14 años, 8 meses
Puntos: 0
¿2 efectos diferentes para a:hover?

li a:hover{
background-color: green;
border-color: #000;
border-bottom: solid 1px #6CC;
font-weight: bold;
}


Si tengo mas de una lista, y no quiero que todas tengan en mismo efecto cuando se pasa el raton, ¿como descarto?

He probado a llamar a la lista ul.menusuperior y despues menusuperior.li a:hover mas todo lo de arriba, para que solo aplicase ese efecto a esa lista en concreto, pero no funciona, y si lo dejo asi lo aplica a todos las listas del site...


¿Alguna alternativa?

Un saludo
  #2 (permalink)  
Antiguo 02/09/2009, 12:03
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: ¿2 efectos diferentes para a:hover?

seguro que no anda?...
ul.mimenu{}
ul.mimenu li{}
ul.mimenu li a{}
ul.mimenu li a:hover{}
no hay mas pega el codigo que dices que te da error... algo debe estar pasando chao!:..
__________________
Toroflix - movies.
  #3 (permalink)  
Antiguo 02/09/2009, 12:13
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: ¿2 efectos diferentes para a:hover?

Hola Lorelopez

cito:"Si tengo mas de una lista" te refieres a mas de una <ul> no? si es asi entonces lo resuelves con dos clases

<style>
.lista1 a:hover{
background-color: green;
border-color: #000;
border-bottom: solid 1px #6CC;
font-weight: bold;
}

.lista2 a:hover{
background-color: #FF0000;
color:#FFFFFF;
padding:5px;
border-bottom: solid 1px #6CC;
font-weight: bold;
list-style:none;
text-decoration:none;
}
</style>


si por ejemplo tienes en body ...

lista numero 1:

<ul class="lista1">
<li><a href="#">item 1a</a></li>
<li><a href="#">item 1b</a></li>
<li><a href="#">item 1c</a></li>
</ul>

lista numero 2:

<ul class="lista2">
<li><a href="#">item 2a</a></li>
<li><a href="#">item 2b</a></li>
<li><a href="#">item 2c</a></li>
</ul>


Si en cambio te refieres a mas de un <li> aplicas las clases a <li> (o tambén a <a> como quieras) por ejemplo:

<ul>
<li class="clase_para_li"><a href="#">item 2a</a></li>
<li><a href="#" class="clase_para_a">item 2b</a></li>
<li><a href="#">item 2c</a></li>
</ul>


Cualquier cosa postea el código como indica alexk

Saludos!

  #4 (permalink)  
Antiguo 02/09/2009, 12:31
Avatar de latindesign  
Fecha de Ingreso: agosto-2009
Ubicación: Lima
Mensajes: 11
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: ¿2 efectos diferentes para a:hover?

pues la unica solucion no son clases si el elemento ul esta dentro de un div con id#header podrias usarlo sin clases

y luego si en el div #footer hay otro ul li pues desde del css puedes referenciar a los 2 sin añadir clases si no usando la especificdad en css


#header ul li a{}

#footer ul li a {}

Siempre en cuando estren dentro de un elemento especifico si estan sueltas aun asi puedes aplicar un id al elemento UL y de ahi partir saludos
  #5 (permalink)  
Antiguo 02/09/2009, 12:37
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: ¿2 efectos diferentes para a:hover?

Jolín, muchísimas gracias ALEXK, es que estaba poniendo menusuperior.li a:hover y no UL.menusuperior li a:hover. ERES UN CRACK!
  #6 (permalink)  
Antiguo 02/09/2009, 12:39
 
Fecha de Ingreso: agosto-2009
Mensajes: 70
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: ¿2 efectos diferentes para a:hover?

Y gracias tamb a latindesign y cristian_cena, super helpful!!
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 03:36.