[Resolvido] Dar :hover em um link e ao mesmo tempo em outra

[Wesley F Souza 1]

Olá a todos :D

É o seguinte se eu der link:hover a cor do link fica branco o background do link fica preto e a outra DIV eu quero que fique laranja, como faço isso?

 

Obrigado :)

[ricardo_mc 19]

Você só pode dar o efeito :hover do CSS em mais de um elemento ao mesmo tempo, caso eles estejam um dentro do outro, caso contrário, apenas com Javascript ou outra linguagem de servidor, onde você rastreia e altera os componentes em uma função.

 

Exemplo de um elemento dentro do outro:

 

HTML

<div class="divMae">
 <a href="#" class="link01">Primeiro Link</a>
 <a href="#" class="link02">Segundo Link</a>
</div>

 

CSS

.divMae{background:#CCC;}
.divMae .link01, .divMae .link02{color:#333;background:#999;}

.divMae:hover{background:#000;}
.divMae:hover .link01{color:#FFF;background:#333;}
.divMae:hover .link02{color:#FFF;background:#F00;}

[Wesley F Souza 1]

Você só pode dar o efeito :hover do CSS em mais de um elemento ao mesmo tempo, caso eles estejam um dentro do outro, caso contrário, apenas com Javascript ou outra linguagem de servidor, onde você rastreia e altera os componentes em uma função.

 

Exemplo de um elemento dentro do outro:

 

HTML

<div class="divMae">
 <a href="#" class="link01">Primeiro Link</a>
 <a href="#" class="link02">Segundo Link</a>
</div>

 

CSS

.divMae{background:#CCC;}
.divMae .link01, .divMae .link02{color:#333;background:#999;}

.divMae:hover{background:#000;}
.divMae:hover .link01{color:#FFF;background:#333;}
.divMae:hover .link02{color:#FFF;background:#F00;}

 

 

Hmm não sei se consegui explicar direito mas é tipo assim.

 

 <style>
  #mae { background:#000; }
  a.prin { color:#fff; }
  /* --- ao passar o mouse no link .prin quero que ele fique preto #000 e a #mae fique com o background branco #fff axo q agora expliquei melhor.
 </style>


  <div id="mae">

  <a href="#" class="prin">Teste</a>  

  </div>

[ricardo_mc 19]

Então, foi o que eu expliquei. Dessa forma não dá.

 

Porque <a> está dentro de <div>, então pelo CSS ele lê DIV --> A e não o oposto.

 

Pra fazer o que você quer, é preciso de javascript ou jQuery., onde você vai dizer que ao passar o mouse no elemento B, ele vai alterar também o elemento A.

[Wesley F Souza 1]

Então, foi o que eu expliquei. Dessa forma não dá.

 

Porque <a> está dentro de <div>, então pelo CSS ele lê DIV --> A e não o oposto.

 

Pra fazer o que você quer, é preciso de javascript ou jQuery., onde você vai dizer que ao passar o mouse no elemento B, ele vai alterar também o elemento A.

Ah sim entendi :S brigadãao ricardo tirou minha dúvida :)