Ir para conteúdo

POWERED BY:

Arquivado

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

Periscuelo

[Resolvido] a:active e a:focus no chrome

Por , em Desenvolvimento frontend

Recommended Posts

Periscuelo    20

Periscuelo
Postado

Pessoal Bom Dia.

 

Estou com uma dificuldade e pesquisando no google

não encontrei nada falando a respeito.

Coloquei alguns efeitos em um menu dropdown via css

e esta tudo ok nos navegadores ie6, ie7, ie8 e FireFox.

 

Porém no chrome a unica coisa que não funciona é o a:active (que nao rola no ie8 e ff)

e o a:focus (que rola no ie8 e ff).

 

Alguém já passou por isso ou possue exemplos de css onde estas propriedades funcionam?

 

 

Grato desde já pela atenção de todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dee    0

Dee
Postado

O active é quando o link está ativo, ou seja quando você clicou nele.

Pelo que eu saiba a propridade active e focus do css são diferentes.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Periscuelo    20

Periscuelo
Postado

O active é quando o link está ativo, ou seja quando você clicou nele.

Pelo que eu saiba a propridade active e focus do css são diferentes.

 

Amigo eu não disse que são iguais, e sim que no caso do ie8 e FireFox como o active não funciona

igual no ie6 e ie7 eu coloquei o focus para dar o mesmo efeito, e deu certo.

(Ou seja quando você clica no link ele destaca o link clicado no momento)

 

Porém no chrome isso não ocorre.

 

Amigo Thiago abaixo vai o código.

 

estilo.css

/* inico estrutura geral */
body { margin: 0; padding: 0; border: none; text-align: center; } /* alinha div no IE */
#master { margin: 0 auto; width: 975px; height: 540px; text-align: left; } /* alinha div outros Browsers */
/* fim estrutura geral */

/* inicio estrutura especifica */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
#top { height: 144px; background-image: url("../imgs/topo.jpg"); }
#logo { width: 156px; height: 110px; }
#footer { clear: both; margin-top: 10px; _margin-top: 3px; height: 20px; font-weight:bold; text-align: center; border: 1px solid black; }
#contDiv { width: 98.6%; height: 97.5%; _height: 96.3%; margin-left: 5px; _margin-left: 2px; }
/* fim estrutura especifica */

/* inicio classes */
.body { height: 75%; }
.body div { height: 100%; float: left; margin-top: 5px; }
.contents { width: 808px; border: 1px solid black; }
.txtEmpresa { width: 500px; height: 150px !important; margin-top: 20px !important; margin-left: 159px; _margin-left: 80px; font: 12px arial; }
.nav a { *width: 92%; }

/* menu */
.menu { width: 165px; }
.menu ul { margin: 0; padding: 0; list-style: none; width: 165px; border-bottom: 1px solid #ccc; }
.menu ul li { position: relative; }
.menu li ul { position: absolute; left: 164px; top: 0; display: none; }

/* Itens do Menu */
.menu ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }
.menu ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
.menu ul li a:active { color: #E2144A; background: #f9f9f9; } /* Active Styles */
.menu ul li a:focus { color: #E2144A; background: #f9f9f9; } /* Active Styles Mozilla & IE8 */
.menu li ul li a { padding: 2px 5px;} /* Sub Menu Styles */
.menu li:hover ul , li.over ul { display: block; } /* The magic Mozilla */
*li:hover, li.over ul { display: block; } /* The magic IE */
/* fim Itens do Menu */

/* fim menu */

/* fim classes */

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Teste</title>
		<script src="js/drop_down.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="css/estilo.css" />
	</head>
	<body>
		<div id="master">
		    <div id="top"></div>
			<div class="body">
				<div class="menu">
				    <ul id="nav" class="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Empresa</a></li>
                        <li><a href="#">Serviços</a>
                          <ul>
                            <li><a href="#">Serviço 1</a></li>
                            <li><a href="#">Serviço 2</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Fale conosco</a></li>
                    </ul>
                    <div id="logo"></div>
				</div>
				<div id="contents" class="contents"></div>
			</div>
			<div id="footer"> Rua teste Nº 0 Cambuci - SP CEP 00000-000</div>
		</div>
	</body>
</html>

Se você testar este código nos ie's e firefox, quando você clica em cima do menu ele destaca o menu.

No chrome isso não ocorre.

 

O que estou fazendo de errado?

 

Desculpe se o css não esta bem feitinho mas é que também não sou crack nisso rss.

 

Grato pela atenção de todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Cara, está tudo certo. Só que você declarou o :hover e :active tudo igual. Olhe:

 

.menu ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
.menu ul li a:active { color: #E2144A; background: #f9f9f9; } /* Active Styles */
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Periscuelo    20

Periscuelo
Postado

Mas amigo thiago eu coloquei igual porque realmente eu quero que fique igual.

 

Se você testar no ie você vai ver que ao clicar no link ele fica igual ao hover.

Porém no Chrome isso não ocorre.

 

Com o código que postei você pode verificar oq estou dizendo.

Meu problema no chrome é que ele não fica igual ao hover apesar de eu escrever o

código para igualar entendeu?

 

 

Grato mais uma vez a todos pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Periscuelo    20

Periscuelo
Postado

Está tudo certo, cara.

 

Acho que você quer o referente ao post #2.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Então o problema é o meu Chrome porque no ie e firefox funciona.

Outra coisa interessante seria o código mensionado no post #2 estar errado e só não funcionar em um unico navegador

e esse navegador não ser um IE.

 

Você testou o código no seu Chrome e ao clicar no menu ele destacou

o mesmo mudando a cor do fundo de branco para azul? :huh:

Viu a diferença do teste no IE, Mozilla e no Chrome?

 

Grato mais uma vez pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

O post #2 nem tem código. :blink:

 

Testa isso aí:

 

/* inico estrutura geral */
body { margin: 0; padding: 0; border: none; text-align: center; } /* alinha div no IE */
#master { margin: 0 auto; width: 975px; height: 540px; text-align: left; } /* alinha div outros Browsers */
/* fim estrutura geral */

/* inicio estrutura especifica */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
#top { height: 144px; background-image: url("../imgs/topo.jpg"); }
#logo { width: 156px; height: 110px; }
#footer { clear: both; margin-top: 10px; _margin-top: 3px; height: 20px; font-weight:bold; text-align: center; border: 1px solid black; }
#contDiv { width: 98.6%; height: 97.5%; _height: 96.3%; margin-left: 5px; _margin-left: 2px; }
/* fim estrutura especifica */

/* inicio classes */
.body { height: 75%; }
.body div { height: 100%; float: left; margin-top: 5px; }
.contents { width: 808px; border: 1px solid black; }
.txtEmpresa { width: 500px; height: 150px !important; margin-top: 20px !important; margin-left: 159px; _margin-left: 80px; font: 12px arial; }
.nav a { *width: 92%; }

/* menu */
.menu { width: 165px; }
.menu ul { margin: 0; padding: 0; list-style: none; width: 165px; border-bottom: 1px solid #ccc; }
.menu ul li { position: relative; }
.menu li ul { position: absolute; left: 164px; top: 0; display: none; }

/* Itens do Menu */
.menu ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }
.menu ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
.menu ul li a:active { color: #E2144A; background: #f00; } /* Active Styles */
.menu ul li a:focus { color: #E2144A; background: #f9f9f9; } /* Active Styles Mozilla & IE8 */
.menu li ul li a { padding: 2px 5px;} /* Sub Menu Styles */
.menu li:hover ul , li.over ul { display: block; } /* The magic Mozilla */
*li:hover, li.over ul { display: block; } /* The magic IE */
/* fim Itens do Menu */

/* fim menu */

/* fim classes */
O fundo vai ficar vermelho no momento do clique.

 

Se você quer que o :hover e :active sejam iguais, nem precisa declarar o :active.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Periscuelo    20

Periscuelo
Postado

Amigo Thiago, acho que você ainda não entendeu o meu problema ...

 

Ótimo que fique vermelho ao clicar.

No IE e FireFox mesmo depois de clicar

ele MANTEM a cor vermelha aonde você clicou.

 

Já no Chrome ele só fica vermelho no momento do click.

E a minha duvida é, já que em todos os navegadores eu consigo

fazer com que ele continue vermelho mesmo após o click, porque

no Chrome isso não funciona?

 

Entendeu agora que não quero mudar a cor e sim manter a cor após

clicar no menu?

 

Você testou o código em outros navegadores para visualizar o que estou

falando?

 

Grato mais uma vez pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Na verdade isso acontece por causa do :focus. O jeito que você está usando está errado, até por que alguma hora o botão vai ter que perder o foco. Olha esse link http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/ É o que deseja.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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