-5

como eu faço pra aparecer uma palavra dentro de uma DIV ao passar o mouse sobre ela?

5
  • Possível duplicata de Ativar HOVER sem clicar na mesma div 20/10/2017 às 19:12
  • 3
    Já possui algum código? O que fez até agora?
    – Dudaskank
    20/10/2017 às 19:13
  • Você consegue fazer isso somente com CSS, utilizando a propriedade display em conjunto com :hover 20/10/2017 às 19:33
  • 1
    Oi Christian, bem-vindo ao site. Aqui não deletamos as perguntas depois de resolvidas. A ideia é que os conteúdos aqui possam ajudar a mais gente além de quem perguntou.
    – bfavaretto
    20/10/2017 às 19:36
  • 1
    Se alguma das respostas abaixo resolveu seu problema, por favor marque o "tick" verde ao lado dela
    – bfavaretto
    20/10/2017 às 19:39

2 Respostas 2

3

Você pode utilizar o evento onmouseover(); do javascript para fazer o texto aparecer, e, se quiser, utilizar o onmouseout(); para fazer o texto desaparecer após o mouse sair da div, observe:

É notável discutir que em celulares esses eventos terão o funcionamento de 'click', ou seja, só irão ser ativados se o usuário tocar na div ou fora dela.

function aparecerTexto() {
  document.getElementById("div").innerHTML = "Texto";
}
function reset() {
  document.getElementById("div").innerHTML = "";
}
#div{
  width:100px;
  height:100px;
  background-color:#f00;
}
<html>
  <head></head>
    
  <body>
    <div onmouseover="aparecerTexto();" onmouseout="reset();" id="div"></div>
  </body>
</html>

-2

Eu fiz utilizando jQuery

css:

.corpo {
  width:200px;
  min-height:50px;
  background-color:red;
}

html :

<div class="corpo" id="seuId" onmouseover="$('#seuId').html('seuTexto');" onmouseleave="$('#seuId').html('')"></div>

O evento onmouseover é para quando o mouse estiver em cima da div adicionar o texto que você deseja, e o evento onmouseleave é acionado quando você tira o mouse de cima da div assim removendo o texto antes inserido

4
  • 3
    Considere não utilizar jQuery para uma situação tão simples que pode ser resolvida com javascript puro. Tente explicar ou adicionar sites que explicam o que você está utilizando para resolver o problema. 20/10/2017 às 19:18
  • @WesleyNascimento se no projeto ja tiver jQuery se torna mais valido, pois a redução em linhas de codigo é notavel 20/10/2017 às 19:19
  • 1
    "se no projeto já tiver jQuery" 20/10/2017 às 19:19
  • 1
    Much jQuery!!!!
    – Raizant
    21/10/2017 às 8:48

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