Cambiar el color de los enlaces en el menú principal de WordPress al pasar el ratón

  • Autor Autor Canino19
  • Fecha de inicio Fecha de inicio
Canino19

Canino19

Delta
Verificado por Whatsapp
Buenas tardes, a ver si me podéis echar una manilla. Quisiera hacer lo siguiente, en un main menú de una plantilla de wordpress me gustaría darle un color determinado a cada elemento del menú cuando paso el ratón por encima. Creo que es con el atributo hover, pero no termino de acertar como hacerlo. Os copio el código del listado de elementos del menú para que os sea más fácil verlo sobre el ejemplo concreto:
HTML: 
<ul id="mainmenu" class="dropdown"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-14"><a href="http://noticiasseo.com/hotel/">Inicio</a>
<ul class="sub-menu">
	<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://noticiasseo.com/hotel/?page_id=2">Página de ejemplo</a></li>
</ul>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25"><a href="http://noticiasseo.com/hotel/?cat=2">Eventos</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21"><a href="http://noticiasseo.com/hotel/?cat=4">Ofertas y Noticias</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="http://noticiasseo.com/hotel/?cat=6">Eventos Madrid</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28"><a href="http://noticiasseo.com/hotel/?cat=5">Recomendaciones Madrid</a></li>
</ul>

¿Cómo añadimos el cambio que os comento? Gracias de antemano y un saludo.
 
Cada item del menú se le asigna un número, haz la prueba en el botón de Eventos, dale botón derecho-inspeccionar elemento y verás ese número.

Es calgo como esto: page-item-20420

Entonces en tu css deberías hacer algo así

PHP: 
li.page-item-20420 a:hover {
	background:#F77F00;
}
 
Sí, como dice Krusty, debes agregar un "a:hover" a tu CSS.

saludos!
 
Gracias por la ayuda, sigo con las dudillas, si le doy a inspeccionar elemento por ejemplo a eventos me sale de la forma
HTML: 
<li id="menu-item-25" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25"><a href="http://noticiasseo.com/hotel/?cat=2">Eventos</a></li>

Con lo que supongo que el item que decís es el número 25, me voy a mi hoja de estilos y añado al final
HTML: 
li.page-item-25 a:hover {
    background:#F77F00;
}

Actualizo pero no varía, al pasar el cursor sobre "eventos" en el menú permanece igual. ¿En qué me equivoco? Gracias!
 
prueba con background-color:#F77F00; o sino color:#F77F00;

un saludo
 
Borra caché y vuélvelo a intentar, si no cambia, da otra vez inspeccionar elemento y en el lado derecho donde sale el css, checa que sí aparezca el código que agregaste.
 
Canino19 dijo:
Gracias por la ayuda, sigo con las dudillas, si le doy a inspeccionar elemento por ejemplo a eventos me sale de la forma
HTML: 
<li id="menu-item-25" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25"><a rel="nofollow" href="http://noticiasseo.com/hotel/?cat=2">Eventos</a></li>

Con lo que supongo que el item que decís es el número 25, me voy a mi hoja de estilos y añado al final
HTML: 
li.page-item-25 a:hover {
    background:#F77F00;
}

Actualizo pero no varía, al pasar el cursor sobre "eventos" en el menú permanece igual. ¿En qué me equivoco? Gracias!
Hacer clic para expandir...


Si quieres cambiar el color de cada elemento, debes aplicar el hover al elemento padre:

HTML: 
  .sub-menu a:hover{ color:red }
 
Hola, yo creo que lo que debes hacer es simplemente asignar un código css a cada clase que asignaste ejemplo:

HTML: 
<li id="menu-item-28" class="rojo"><a href="http://noticiasseo.com/hotel/?cat=5">Recomendaciones Madrid</a></li>

Insertar CODE, HTML o PHP: 
.rojo a:hover{
color: red!important;
}

Solo debes agregar el atributo "!important;" a la clase asignada, cosa de que el navegador interprete ese color por sobre los otros... En mi web utilizaba ese sistema... puedes ver el ejemplo en este link
 
hasta ahora entiendo para que sirve el "!important"
 
para cambiar a todo el menu el fondo es:
#mainmenu a:hover {background: red;}
para el color de la fuente:
#mainmenu a:hover {color: blue;}

si quieres un solo enlace del menu tienes que buscar la clase o id unico:
#menu-item-25
o
.menu-item-25

si quieres que se te marque cuando estés en la dirección no es a:active recuerda que sera a.active

---------- Post agregado el 18-oct-2013 hora: 16:07 ----------

!important es para que ninguna clase que se ejecute después lo reescriba.
 
Gracias a todos por la información publicada muy útil a más de uno le ayudara.
 
amigo tienes que agregar un :hover al final, en tu caso seria a:hover por que quieres modificar el enlace, y bueno luego cambiarle el color a la fuente o el background con las etiquetas, color y background un ejemplo seria:

.nombre de clase a:hover{color:red; background:red;}

si vas a agregarle un background te recomiendo que le agregues un paddin para que se vea mejor. saludos
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

R
Cambiar color enlaces menú principal
Respuestas
2
Visitas
313
rgaspain
R
Atrás
Arriba