Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

laisf

a:active nao funciona

Por , em Desenvolvimento frontend

Recommended Posts

laisf    0

laisf
Postado

Olá galera sou nova com css e tenho uma duvida. Estou desenvolvendo um menu com imagens em css e nao estou conseguindo fazer com que o a:active funcione, ele deveria ficar igual o a:hover depois de clicado e permanecer enquanto a pessoa nao clicasse em outro botão. Consigo fazer direto pelo html pelo onclick e etc mas pelo css nao estou conseguindo. Por favor alguem me da uma luz.

 

Alem desse problema, a primeira vez que carrega a pagina parece que os botoes ficam piscando ai logo em seguida depois de carregar ja ficam normais. O que pode ser?

 

#botao{
	background:url(../img/bg.jpg);
	height:235px;
}
#menu{
	padding-top:10px;
	margin:0 auto;
	width:800px;
	height:30px;
}
#menu ul li{
	display:inline;
	list-style:none;
	
}
.home a{
	background:url(../img/home.png);
	width:116px;
	height:37px;
	float:right;
}
.home a:hover{
	background:url(../img/home-over.png);
	width:116px;
	height:37px;
	float:right;
}
.home a:active{
	background:url(../img/home-over.png);
	width:116px;
	height:37px;
	float:right;
}
<div id="menu">
<ul>
<li class="contato"><a href="#"></a></li>
<li class="galeria"><a href="#"></a></li>
<li class="servicos"><a href="#"></a></li>
<li class="empresa"><a href="#"></a></li>
<li class="home"><a href="teste.html"></a></li>
</ul>
</div>

o que estou fazendo de errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

De fato, aconselho ler o que são pseudo-classes e quais são suas funções, mas vamos ao que interessa. Vou deixar uma prévia de como cada um funciona.

  • :hover = Recebe as propriedades do CSS quando o mouse é passado por cima;
  • :active = Recebe as propriedades do CSS enquanto o usuário mantiver o botão clicado, ao soltar o clique, ele retorna pro estilo anterior (mantém ativo enquanto o clique estiver ativo);
  • :focus = Recebe as propriedades do CSS quando o usuário clicar em algum campo do formulário e não clicar fora dele. Enquanto estiver em foco, ele permanecerá com a classe. (Obs.: Só funciona com campos de formulário).

Pra você manter o estilo a algo, você vai precisar de uma função em JavaScript/jQuery, como por exemplo:

$('#id_de_algo').click(function() {
   $('#id_de_algo').toggleClass('ativo');
});

- Esse código é responsável por adicionar e remover a classe ativo quando o elemento for clicado.

 

Quanto a colocar as imagens no body é simplesmente remover elas do arquivo do CSS e utiliza-las dentro do HTML mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito