Definir a: sobrevoar com base na classe
tenho o seguinte HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
no CSS, quero definir o a:hover para estes itens de menu para uma cor particular. Então eu escrevo:
.menu a:hover
{
color:#DDD;
}
mas, eu quero definir esta cor a:hover apenas para as marcas <a> com a classe main-nav-item e não a main-nav-item-current, porque tem uma cor diferente e não deve mudar no hover. Todas as marcas <a> dentro do menu o div deve mudar de cor na passagem, excepto a que tem a actual classe.
.menu a:hover .main-nav-item
{
color:#DDD;
}
pensar que só aqueles com a classe principal-nav-item mudarão de cor no hover, e não o actual. Mas não está a funcionar.
5 answers
Tenta isto:
.menu a.main-nav-item:hover { }
Para compreender como isto funciona, é importante ler isto como o navegador faz. O a define o elemento, o .main-nav-item qualifica o elemento somente para aqueles que têm essa classe, e, finalmente, o psuedo-classe :hover é aplicada ao qualificados expressão que vem antes.
Aplica esta regra de hover a todos os elementos de fixação com a classe que são descendentes. de qualquer elemento com a classe menu.
.menu > .main-nav-item:hover
{
color:#DDD;
}
Este código diz para agarrar todos os links que têm uma classe de Main-nav-item e são filhos do menu classe, e aplicar a cor #DDD quando eles são pairados.
Um erro comum é deixar um espaço antes dos nomes das classes. Mesmo que esta fosse a sintaxe correta:
.menu a:hover .main-nav-item
Portanto, você não escreveria
.menu a .main-nav-item:hover
Seria
.menu a.main-nav-item:hover
.main-nav-item:hover
Isto mantém a especificidade baixa
Podes simplesmente tentar:
a.main-nav-item:hover { }