DIV Display text while hovering

Asked

Viewed 5,395 times

-5

how do I pop a word inside a DIV when passing the mouse over it?

javascript css html5

  • Possible duplicate of Activate HOVER without clicking the same div

  • 3

    Already have any code? What have you done so far?

  • You can do this only with CSS, using the display property in conjunction with :Hover

  • 1

    Hi Christian, welcome to the site. Here we do not delete questions after resolved. The idea is that the contents here can help more people besides those who asked.

  • 1

    If any of the answers below solved your problem, please tick the green "tick" next to it

2 answers

3


You can use the event onmouseover(); javascript to make the text appear, and, if you like, use the onmouseout(); to make the text disappear after the mouse leaves the div, note:

It is noteworthy to discuss that in cell phones these events will have 'click' functioning, IE, will only be activated if the user touches the div or outside it.

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

I did using 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>

The event onmouseover is for when the mouse is on top of the div add the text you want, and the event onmouseleave is triggered when you take the mouse from the top of the div thus removing the previously inserted text

  • 3

    Consider not using jQuery for a situation so simple that it can be solved with pure javascript. Try explaining or adding sites that explain what you’re using to solve the problem.

  • @Wesleynascimento if in the project already has jQuery becomes more valid, because the reduction in lines of code is noticeable

  • 1

    "if the project already has jQuery"

  • 1

    Much jQuery!!!!

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.