Jump to content
Fórum Script Brasil
  • 0

Link Ativo com efeito hover Jquery


gaahsz
 Share

Question

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;
 
}
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...