[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;

 

}

[Pessoal, ajuda com posicionamento de imagem dentro da <td>!]

Pessoal, estou montando um site e não estou conseguindo posicionar a imagem e o texto da forma que eu quero dentro da <td> da tabela.

 

Eu gostaria que a imagem ficasse alinhada a esquerda e no centro verticalmente com o texto à frente dele.

 

td class="celulas1">

<!--CÉLULA DA TABELA ONDE CONTÉM LINK DE REDIRECIONAMENTO, ICONE E TEXTO DE IDENTIFICAÇÃO-->

<a href="http://google.com.br" class="linksicones"><p class="textolink"> <img src="administracaopredial.png"  class="menus"> Administração Predial</p> </a>

</td>