Link Ativo com efeito hover Jquery

[gaahsz 0]

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;

}

 

[gaahsz 0]

Eu consegui fazer usando addClass, más quando eu clico e redireciona para outra página eu perco o addClass

[YuriLuiz 0]

é apenas css mas espero mas espero ajudar

<div id="navcontainer">

<ul>
<li id="active"><a href="#">Eggs</a></li>
</div>

 

#active a
{
display: block;
color: #FFF;
background-color: #600;
}

 

 

abraços