Ir para conteúdo

Arquivado

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

stview

:hover não funciona no IE

Por , em Desenvolvimento frontend

Recommended Posts

stview    0

stview
Postado

Criei uma classe que formata um elemento DIV, e criei um :hover para ele que apenas muda a cor de fundo.No FF funcionou, mas no IE não ... Depois descobri que o :hover é apenas para a tag a no IE.Eu "solucionei" criando um js de mouseover e out que muda o style da cor do bg, mas apesar de estar funcionando, acredito não ser a melhor forma ... O Klaus me falou ontem que tem como resolver isso com o htc mas não deu tempo dele me explicar dirteito.Como q eu posso resolver essa parada?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Acho que no IECA soh com JS mesmo[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

:HOVER não é aplicado a outras TAGs em CSS 1. Se você tentar validar seu código verá que isto está errado.

 

A maneira se você solucionar isso é aplicando um A, já que se você pensar em termos de usabilidade, ações que levam a cliques é que recebem movimento.

 

Você pode colocar dentro do elemento a tag A e pedir para que ela se porte como um bloco, daí você insere a cor.

 

Exemplo:

 

<p><a href="">tst</a></p>

 

p a {width: 100px;height: 50px;padding: 5px; /* Lembre-se que isso vai causar um acréscimo de 10px no seu width e height */background: #CCCCCC;color: #000000;display: block;}p a:hover {background: #000000;color: #CCCCCC;}

Esse é o único modo correto de agir.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Mas isso usa JavaScript e dá pra resolver com estrutura correta sem fazer a adição de script algum, abasta se ater a estrutura e semântica.Estou colocando o código inteiro, assim você vê onde tava o problema. ;) Ah, e bem vindo ao mundo dos webstandards!!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style>.block_over {width: 100px;float: left;}.block_over a {width: 100px;height: 50px;padding: 5px; /* Lembre-se que isso vai causar um acréscimo de 10px no seu width e height */background: #CCCCCC;color: #000000;display: block;}.block_over a:hover {background: #000000;color: #CCCCCC;}</style></head><body><div class="block_over"><a href="a">veja mais</a></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

Certo, isso foi resolvido, agora estou com problema que as div´s estão se sobrepondo ...

Vou colar tudo aqui pra ver onde esta o erro.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>TITULO</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>#conteudo {	background					: #FFFFFF;	padding						: 0px;	width						: 776px;	height						: 40px;	position					: absolute;	left						: 50%;	margin-left					: -388px;}#LATesq {	position					: absolute;	width						: 2px;	margin-left					: 0px;}#LATdir {	position					: absolute;	width						: 2px;	margin-left					: 774px;}/*####*/#rodape {	padding						: 0px;	width						: 776px;	position					: absolute;	left						: 50%;	margin-left					: -388px;	clear						: both;}#rodape div {	margin						: 0px;	padding						: 0px;}/*####*/.LNazul {	height						: 4px;	background					: #2B7896;}.LNverde {	height						: 4px;	background					: #7BC4A0;}.dvLNHspc {	background-color			: #74CCB2;	height						: 2px;	margin						: 4px 0px 4px 0px;}.dvLNH {	background-color			: #2A7997;	height						: 2px;}.dvOVER a {	height						: 16px;	padding						: 2px 4px 0px 0px;	background					: #5D99B0;	color						: #FFFFFF;	display						: block;}.dvOVER a:hover {	background					: #74CCB2;	color						: #2A7997;}</style></head><body><div id="topo"><img src="images/transpar.gif" width="4" height="4"></div><div id="conteudo">   <div id="LATesq"><img src="images/lateral_esq.gif" width="2" height="278" border="0"></div>  <div id="LATdir"><img src="images/lateral_dir.gif" width="2" height="278" border="0"></div>  <div id="menu"><a href="index.php"><img src="images/logo.gif" width="222" height="72" border="0"></a></div></div><div id="rodape" align="center">  <div align="right"><img src="images/creci.gif" width="69" height="10" vspace="4"></div>  <div class="LNazul"><img src="images/transpar.gif" width="4" height="4"></div>  </a><img src="images/rdp_copy.gif" width="430" height="17" hspace="80" vspace="5">  <div class="LNverde"><img src="images/transpar.gif" width="4" height="4"></div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

Opa, vou dar uma olhada nos links, mas to com prazo meio em cima desse projeto, não sei se vou conseguir aplicar webstandards desa vez.Sobre o border, não é so um border, é uma sombra.

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

Então, eu li e reli, e não estou entendendo pq que ainda esta sobrepondo ...

 

Vou mandar o link pra você´s verem, não consigo ver o que esta errado, se é no html, ou no css ...

 

Uadarréu!!

 

obs: o laranja é só pra ver melhor os limites ...

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