Ir para conteúdo

POWERED BY:

Arquivado

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

Anderson Santos

alterar estilo de texto

Recommended Posts

Bom dia, pessoal Tenho um layout tableless e um menu com estilos aplicados à tag A e A:hover. Abaixo do menu de texto há imagens referentes à esses itens que eu queria que, ao receber um evento onmouseover alterasse também o estilo do texto de menu relacionado. Vocês sabem como eu poderia fazer para alterar o estilo do texto do menu, ou que outra forma eu poderia estruturar. O layout está mais ou menos assimTextoMenu1 TextoMenu2 TextoMenu3|Imagem1| |Imagem2| |Imagem3|

Compartilhar este post


Link para o post
Compartilhar em outros sites

Brother!!

 

Uma possivel solução é você desenvolver um javascript que altere o estilo (objeto.className) do <div> em que está seu menu aplicando a formatação desejada.

 

Um exemplo boca de porco é este aqui:

<style type="text/css">	 div#menu	 {		  padding: 5px;		  border-bottom-style: solid;		  border-bottom-color: #CCCCCC;		  border-bottom-width: 1px;	 }	 	 #menu ul	 {		  padding: 0px;		   margin: 0px;	 }	 	 #menu ul li	 {		  list-style-type: none;		  display: inline;	 }	 	 div.navegacao	 {		  color: #000000;	 }	 	 .navegacao ul	 {		  padding: 0px;		   margin: 0px;	   visibility: hidden;	 }	 .navegacao ul li	 {		  list-style-type: none;		  display: inline;	 }	 	 div.azul{		  color: #000099;	   visibility: visible;	 }	 	 .azul ul	 {		  padding: 0px;		   margin: 0px;	 }	 .azul ul li	 {		  list-style-type: none;		  display: inline;	 }	 </style><script language="javascript" type="text/javascript">	 function setClassName(objId, className){		  document.getElementById(objId).className = className;	 }</script><div id="menu">	 <ul>		  <li><a href="#" onmouseover="setClassName('navegacao','azul');">Produtos</a></li>		  <li>|</li>		  <li><a href="#">Catalogo</a></li>		  <li>|</li>		  <li><a href="#">Loja</a></li>		  <li>|</li>		  <li><a href="#">Entrega</a></li>	 </ul></div><div id="navegacao" class="navegacao" onmouseout="setClassName('navegacao','navegacao');">	 <ul>		  <li>Texto</li>		  <li>|</li>		  <li>Texto</li>		  <li>|</li>		  <li>Texto</li>		  <li>|</li>		  <li>Texto</li>	 </ul></div>

Abraços!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Hummmm, acho que com ajustes no meu código esse daí vai funcionar.Valeu =)

Brother!!Uma possivel solução é você desenvolver um javascript que altere o estilo (objeto.className) do <div> em que está seu menu aplicando a formatação desejada.Um exemplo boca de porco é este aqui:

<style type="text/css">	 div#menu	 {		  padding: 5px;		  border-bottom-style: solid;		  border-bottom-color: #CCCCCC;		  border-bottom-width: 1px;	 }	 	 #menu ul	 {		  padding: 0px;		   margin: 0px;	 }	 	 #menu ul li	 {		  list-style-type: none;		  display: inline;	 }	 	 div.navegacao	 {		  color: #000000;	 }	 	 .navegacao ul	 {		  padding: 0px;		   margin: 0px;	   visibility: hidden;	 }	 .navegacao ul li	 {		  list-style-type: none;		  display: inline;	 }	 	 div.azul{		  color: #000099;	   visibility: visible;	 }	 	 .azul ul	 {		  padding: 0px;		   margin: 0px;	 }	 .azul ul li	 {		  list-style-type: none;		  display: inline;	 }	 </style><script language="javascript" type="text/javascript">	 function setClassName(objId, className){		  document.getElementById(objId).className = className;	 }</script><div id="menu">	 <ul>		  <li><a href="#" onmouseover="setClassName('navegacao','azul');">Produtos</a></li>		  <li>|</li>		  <li><a href="#">Catalogo</a></li>		  <li>|</li>		  <li><a href="#">Loja</a></li>		  <li>|</li>		  <li><a href="#">Entrega</a></li>	 </ul></div><div id="navegacao" class="navegacao" onmouseout="setClassName('navegacao','navegacao');">	 <ul>		  <li>Texto</li>		  <li>|</li>		  <li>Texto</li>		  <li>|</li>		  <li>Texto</li>		  <li>|</li>		  <li>Texto</li>	 </ul></div>
Abraços!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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