Link Ativo com efeito hover Jquery

[gaahsz]

Olá pessoal! 

 

Estou tentando fazer com que o link que o usuário estiver na página que ele redireciona,

o link fique com efeito hover destacado para saber a página que ele esta! 

 

Cada link tem um efeito Hover diferente!

 

HTML

 

<div id="linksTopo">

     <div id="linksTopoUnico" class="bg1">

     <a href=".\home.html" class="linkTopo"> Home </div> </a>

 

     <div id="linksTopoUnico" class="bg2">

     <a href=".\vantagens.htm" class="linkTopo1"> Vantagens</div> </a>

 

     <div id="linksTopoUnico" class="bg3">

     <a href=".\saibamais.html" class="linkTopo2"> Sobre</div> </a>

 

     <div id="linksTopoUnico" class="bg4">

     <a href=".\cadastro.htm" class="linkTopo3"> Cadastro</div> </a>

 

     <div id="linksTopoUnico" class="bg5">

     <a href=".\desenvolv.htm" class="linkTopo4"> Alunos</div> </a>

</div>

 

CSS

 

CADA  LINK TEM UMA COR!

 

a.linkTopo:link, a.linkTopo:visited {

text-decoration: none;

color: #7ac2b7;

font-weight: bold;

 

}

 

a.linkTopo1:link, a.linkTopo1:visited {

text-decoration: none;

color: #7dc758;

font-weight: bold;

}

 

a.linkTopo2:link, a.linkTopo2:visited {

text-decoration: none;

color: #f59920;

font-weight: bold;

}

 

a.linkTopo3:link, a.linkTopo3:visited {

text-decoration: none;

color: #f5de2f;

font-weight: bold;

}

 

a.linkTopo4:link, a.linkTopo4:visited {

text-decoration: none;

color: #a65ac7;

font-weight: bold;

}

 

 

TODOS OS LINKS VÃO FICAR EM COR BRANCA COM O MOUSE EM CIMA

 

a.linkTopo:hover, a.linkTopo1:hover, a.linkTopo2:hover, a.linkTopo3:hover, a.linkTopo4:hover {

color: white;

}

 

CADA LINK TEM UMA BORDA DA DIV DE UMA COR

 

div.bg1{

border-width: thin;

border-color: #7ac2b7;

border-style: solid;

 

}

div.bg2{

border-width: thin;

border-color: #7dc758;

border-style: solid;

}

div.bg3{

border-width: thin;

border-color:  #f59920;

border-style: solid;

}

div.bg4{

border-width: thin;

border-color: #f5de2f;

border-style: solid;

}

div.bg5{

border-width: thin;

border-color: #a65ac7;

border-style: solid;

}

 

QUANDO PASSO O MOUSE O BACKGROUND FICA DA COR DA BORDA

 

div.bg1:hover{

background-color: #7ac2b7;

 

}

div.bg2:hover{

background-color: #7dc758;

 

}

div.bg3:hover{

background-color:  #f59920;

 

}

div.bg4:hover{

background-color: #f5de2f;

 

}

div.bg5:hover{

background-color: #a65ac7;

 

}

[lowys]

Olá!

Faltou o trecho js

Com php dá pra resolver sem js.

Há um erro grave de aninhamento no seu html. Pesquise: aninhamento de tags html

Segundo a W3Schools, id é igualzinho à identidade de pessoas reais: Não pode existir duas pessoas com a mesma identidade.

Logo, não devem existir mais de uma <div> com identidades iguais, leia em: http://www.w3schools.com/css/css_selectors.asp

Existe um conceito chamado DRY - Don't Repeat Yourself; Já que todos os elementos <a> terão text-decoration: none; e font-weight: bold; basta declarar uma única vez!

Já que todas as divs com elementos <a>, terão: border-width: thin;e border-style: solid; declare uma única vez!

Passa o trecho Js aí, pra gente sugerir uma solução. Com jquery, use $(location).attr('href'); para pegar a url atual e adicionar uma classe apenas para o elemento <a> que deverá ser ativado.