Efeito :hover em um bloco de links CSS

[wpmachado 0]

Ola galera to quebrando a cabeça tentando colocar o efeito :hover neste bloco de links de maneira simplificada.

Código Html:

 

<section class="sidebar">

<nav id="esquerdo">

<a href="#"><div id="b1">Pedreiros</div></a>

<a href="#"><div id="b2">Carpinteiros</div></a>

<a href="#"><div id="b3">Eletricistas</div></a>

<a href="#"><div id="b4">Encanadores</div></a>

</nav>

</section>

Código CSS:

nav #esquerdo, #b1, #b2, #b3,#b4, #direito #c1, #c2, #c3, #c4 { (Este ficou blz o problema ta em aplicar o efeito :hover)

border: solid 1px red;

background: #666666;

color: black;

-webkit-transition: 0.5s;

}

nav #esquerdo, #b1:hover, #b2:hover, #b3:hover,#b4:hover, #direito #c1:hover, #c2:hover, #c3:hover, #c4:hover{

color: greenyellow;

background: #000000;

-webkit-transition: 0.3s;

}

Esta foi a unica forma que encontrei de aplicar o efeito :hover em todos os links, alguém sabe uma mais fácil via CSS

 

[leonardo de andrade baessa 16]

Cara para que tanto id=

 

não se poderia ser como um menu ?

<div class="sidebar">
              <ul class="esquerdo">                
                    <li><a href="#">Pedreiros</a></li> 
                    <li><a href="#">Carpinteiros</a></li>  
                    <li><a href="#">Eletricistas></a></li>  
                    <li><a href="#">Encanadores</a></li>  
                </ul>
</section> 

daí então chamaria

.esquerdo li a{  
 
    border: solid 1px red;
    background: #666666;     
    color: black; 
    -webkit-transition: 0.5s; 
}
.esquerdo li :hover{
    color:  greenyellow;
    background: #000000; 
    -webkit-transition: 0.3s;
}

[wpmachado 0]

leonardo

Por hora vou alterar o código para (UL) , até encontrar outra alternativa, pois o problema das (LI) é que também vou precisar dos (ID) para referenciar os links individuais.

valeu, vou deixar o post aberto mais um pouco pode ser que surja outra alternativa. blz

[L. Henrique 179]

leonardo

Por hora vou alterar o código para (UL) , até encontrar outra alternativa, pois o problema das (LI) é que também vou precisar dos (ID) para referenciar os links individuais.

valeu, vou deixar o post aberto mais um pouco pode ser que surja outra alternativa. blz

 

Como assim problema com id em <li>?

 

Considerando que você vai ter um conjunto de <li> dentro de um <ul>, você só precisa adicionar uma classe a <ul> e estilizar a child <li>, assim não precisa ficar replicando tanto código CSS como tem feito. A não ser que você queira estilizar cada <li> a sua própria maneira.

 

Segue um exemplo disso:

HTML:

<nav class="sidebar"> <!-- "Desenecessário" -->
    <ul id="esquerdo">
        <li id="b1"><a href="#">Pedreiros</a></li>
        <li id="b2"><a href="#">Carpinteiros</a></li>
        <li id="b3"><a href="#">Eletricistas</a></li>
        <li id="b4"><a href="#">Encanadores</a></li>
    </ul>
</nav>

CSS:

/* Opcional */
a, a:hover, a:focus, a:after, a:before, a:active{
    text-decoration: none;
    outline: 0;
}

/* Necessário */
#esquerdo{
    display: block;
    width: 100%;
    height: auto;
    background: #323232;
}
    #esquerdo li{
        display: inline-block;
        padding: 10px 0px 10px 0px;
    }
        #esquerdo li a{
            padding: 10px;
            background: #222222;
            border: 1px solid #222222;
            color: #FFF;
            
            /* Só por diversão */
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        #esquerdo li a:hover{
            background: #F1F1F1;
            color: #222222;
        }

Se você quiser ver como ficou esse código, segue aqui a DEMO.

 

Caso não tenha entendido o método, tente esclarecer mais a sua dúvida. Não há necessidade de existir uma <nav> somente com <a> e <div> dentro, já que de uma forma muito mais fácil, limpa e de melhor manutenção pode ser criada com <ul> e <li>.

[wpmachado 0]

Agora sim, no exemplo do Leonardo não me atentei para o fato de colocar o ID dentro da li, talvez por ele ter sugerido outra alternativa.

Valeu pelas dicas.

 

O site que estou desenvolvendo é este www.brasilreformas.com.br

 

No momento esta num servidor caseiro kk mas assim que estiver pronto contrato um servidor de verdade.

 

E falta a justa r o menu