2

Fazer texto de uma div diferente sumir quando outro texto aparecer

<style>
.descricao{
    display: none;
}
</style>
<div id="textos1">
<span class="item"  onclick="document.getElementById('vaga1').style.display='block'" onmouseout="document.getElementById('vaga1').style.display='none'">Idade</span>
<span class="item"  onclick="document.getElementById('vaga2').style.display='block'" onmouseout="document.getElementById('vaga2').style.display='none'">Genero</span>
<span class="item"  onclick="document.getElementById('vaga3').style.display='block'" onmouseout="document.getElementById('vaga3').style.display='none'">Estado</span>
</div>

<div id="textos2">
<span class="descricao" id="vaga1">Recomendado a todas as idades</span>
<span class="descricao" id="vaga2">Masculino</span>
<span class="descricao" id="vaga3">Goiás</span>
</div>

Quero colocar um texto dentro da div textos2, mas que não seja fixo, ele tem que sumir quando aparecer os outros textos.

textos meramente ilustrativos

1 Resposta 1

2

Se entendi bem, é só criar outro span com um id dentro da div#textos2 e ocultar ela no onclick e mostrar no onmouseout:

.descricao{
    display: none;
}
<div id="textos1">
<span class="item"  onclick="document.getElementById('vaga1').style.display='block'; document.getElementById('outrotexto').style.display='none'" onmouseout="document.getElementById('vaga1').style.display='none'; document.getElementById('outrotexto').style.display='block'">Idade</span>
<span class="item"  onclick="document.getElementById('vaga2').style.display='block'; document.getElementById('outrotexto').style.display='none'" onmouseout="document.getElementById('vaga2').style.display='none'; document.getElementById('outrotexto').style.display='block'">Genero</span>
<span class="item"  onclick="document.getElementById('vaga3').style.display='block'; document.getElementById('outrotexto').style.display='none'" onmouseout="document.getElementById('vaga3').style.display='none'; document.getElementById('outrotexto').style.display='block'">Estado</span>
</div>

<div id="textos2">
   <span id="outrotexto">Outro texto</span>
<span class="descricao" id="vaga1">Recomendado a todas as idades</span>
<span class="descricao" id="vaga2">Masculino</span>
<span class="descricao" id="vaga3">Goiás</span>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .