1

Eu possuo uma div e dentro dela um <a> consigo dar hover na div, mas a cor da ancora não muda.

Estrutura HTML:

<div class="TamanhoECorTabs ThemeGrid_Width6">
  <a id="ancora" tabindex="14" href="#">Home</a>
</div>

Estrutura CSS:

.TamanhoECorTabs:hover, .TamanhoECorTabs a:hover{
  background-color: #428bca !important;
  color: #fff !important;
  border:none !important;
  border-bottom: 1px solid #428bca !important;
}

Preciso que quando passar o mouse pela div, mude a cor da ancora, sem precisar passar o mouse sobre a ancora para que o hover funcione.

Outra coisa que está acontecendo é que mesmo a Home estando ativa o hover aparece. Como faço para tirar isso?

3 Respostas 3

3

Exemplo básico:

CSS

a {
    text-decoration: none;
    width:100%;
    float:left;
}
.TamanhoECorTabs:hover, .TamanhoECorTabs a:hover{
    background-color: #428bca !important;
    color: #fff !important;
    border:none !important;
    border-bottom: 1px solid #428bca !important;
    cursor:hand;
}

Exemplo: Demo

9
  • Obrigado! Funcionou perfeitamente. Gostaria de saber se você sabe como como tirar o efeito hover quando a div esta selecionada, como estive com o .active 10/07/2014 às 13:07
  • @ThiagoAlex editei a resposta, veja se funciona 10/07/2014 às 13:12
  • @DouglasBernardino Não funcionou isso, a div está selecionada mas toda vez que passo o mouse em cima ela ativa o hover. 10/07/2014 às 13:16
  • @ThiagoAlex se ta falando assim: quando você clica no Home ele carrega a página home.html, ai você clica em Noticia ele carrega a página noticia.html e ai quem está selecionado não pode ter o efeito hover, outra coisa se usa programação, alguma linguagem?
    – user6026
    10/07/2014 às 13:21
  • @ThiagoAlex e ai posso te ajudar mais? se viu minha último questionamento?
    – user6026
    10/07/2014 às 13:39
1

É só colocar esse display block:

a{
   display:block;
}

http://jsfiddle.net/Aap2H/

1

Para deixar selecionado e sem o evento de hover:

CSS:

.TamanhoECorTabs:focus, .TamanhoECorTabs a:focus{
    background-color: #428bca !important;
    color: #fff !important;
    border:none !important;
    border-bottom: 1px solid #428bca !important;
    cursor:default;
}

Exemplo: http://fiddle.jshell.net/3U5Kn/6/

Caso não queria que ele retorne mais valores no efeito de click, ai terá que fazer uma verificação em seu código, pois quando recarregar a página, você pode estar na página "Home" mas não vai estar com "home" selecionado no menu. Mande seu código para que resolvemos este problema!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .