ToolTip

[fekz 0]

E ai pessoal, beleza? Fiz um tooltip, mas to com um problema... em todos os browsers, tá funcionando, menos no IE6. E o mais estranho não é isso, já que no IE6 nada funciona, e sim o fato de no primeiro item funcionar, e nos outros não, sendo que o código está igual pra todos.

Aí vai:

 

<ul>
						<a href="#" class="dcontexto"><li><img src="_images/categoria-web.gif" alt="" title="" /><span class="categoriaImgFirst"><p>Web</p></span></li></a>
											
						<a href="#" class="dcontexto"><li><img src="_images/categoria-radio.gif" alt="" title="" /><span class="categoriaImg"><p>Rádio</p></span></li></a>
						
						<a href="#" class="dcontexto"><li><img src="_images/categoria-tv.gif" alt="" title="" /><span class="categoriaImg"><p>TV</p></span></li></a>
						<a href="#" class="dcontexto"><li><img src="_images/categoria-impresso.gif" alt="" title="" /><span class="categoriaImg"><p>Impresso</p></span></li></a>
						<a href="#" class="dcontexto"><li><img src="_images/categoria-featured.gif" alt="" title="" /><span class="categoriaImg"><p>Feat</p></span></li></a>
					</ul>

 

/* trabalhos */

a.dcontexto:hover{
	_background: #fff;
}

.categoriaImg{
	background: url(../_images/legenda.jpg) no-repeat;
	width: 99px;
	height: 35px;
	display: none;
}

.categoriaImgFirst{
	background: url(../_images/legenda.jpg) no-repeat;
	width: 99px;
	height: 35px;
	display: none;
}

.categoriaImg p{
	text-align: center;
	margin: 13px;
	color: orange;
}

.categoriaImgFirst p{
	text-align: center;
	margin: 13px;
	color: orange;
}


li:hover .categoriaImg{
	display: block;
	position: absolute;
	margin: 0 0 0 -27px;
	*margin: 22px 0 0 -55px;
}

.dcontexto:hover .categoriaImgFirst{
		display: block;
	position: absolute;
	margin: 0 0 0 -25px;
	*margin: 22px 0 0 -54px;
}

Se puderem me ajudar, agradeço.

 

Abraços a todos.

[William Bruno 1501]

O IE6 não reconhece o pseudo :hover nas tags.. só reconhece para o <a>

li:hover .categoriaImg{

você terá que usar Javascript para ativar esse comportamento no IE6.

[Henrique Barcelos 290]

Vou mover o tópico para a área devida.

 

Webstandards http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript

 

Uma maneira de fazer é:

var elementos = document.getElementById("ID DO ELEMENTO PAI").getElementsByTagName("li");

for(var i = 0; i < elementos.lenght; i++){
	elementos[i].onmouseover = function(){
 	var tooltip = this.getElementsByTagName("div")[0];
 	tooltip.style.display = "block";
	}
	elementos[i].onmouseout = function(){
 	var tooltip = this.getElementsByTagName("div")[0];
 	tooltip.style.display = "none";
	}
}

Deve funcionar...