Link Ativo com efeito hover Jquery
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;
}Discussão (2)
Carregando comentários...