Ir para conteúdo

POWERED BY:

Arquivado

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

ecielu

Botão em Css que muda texto - como fazer

Por , em Desenvolvimento frontend

Recommended Posts

ecielu    0

ecielu
Postado

Olás,

Preciso fazer um botão com dois estados, normal e hover, sendo que cada um deles possui um texto diferente. Exemplo: Normal: Oi tudo bem? Hover: tudo e vc?

 

Como fazer ?

 

Agradeço a quem puder responder!

 

Abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado

O melhor jeito de se fazer é com javascript/jquery.

 

Exemplo:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function texto(nomediv,texto1,texto2){
    $(nomediv).hover(function(){
        $(this).html(texto1);
    },function(){
        $(this).html(texto2);    
    });
    };
$(function(){
    texto("#mudar","mudar texto","voltar texto");
    texto("#oi","oi mudar texto"," oi voltar texto");
    });
</script>
</head>

<body>
<div id="mudar">teste</div>
<div id="oi">teste</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ecielu    0

ecielu
Postado

Bruno, valeu pelo toque!

 

O lance é que são diversos botões com esse efeito, e pelo que eu vi, os textos são armazenados no script, correto?

Imaginei que o "teste" seria o conteudo de cada div... Não manjo muuuito de JS.

 

Valeu!

Abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

vc pode trabalhar com display: none|block. Simples assim.

 

ai fica tudo no html.

<style>
.hover { display: none; }
.muda:hover .normal { display: none; }
.muda:hover .hover { display: block; }
</style>

<p class="muda">
	<span class="normal">Oi, tudo bem?</span>
	<span class="hover">Tudo sim, e vc?</span>
</p>

<p class="muda">
	<span class="normal">Tá estudando css?</span>
	<span class="hover">Não, tô estudando html primeiro</span>
</p>

<p class="muda">
	<span class="normal">Ah, legal.. onde ?</span>
	<span class="hover">No iMasters e no Google</span>
</p>

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