how do I make a word appear inside a DIV while hovering over it?
DIV Display text when hovering [closed]
-5
asked by anonymous 20.10.2017 / 21:10
2 answers
3
You can use the onmouseover (); event to make the text appear, and if you want , use onmouseout (); to make the text disappear after the mouse exits the div, note:
It is remarkable to discuss that in mobile phones these events will have a click operation, that is, they 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>
20.10.2017 / 21:17
-2
I made 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 onmouseover event is for when the mouse is on top of the div to add the text you want, and the onmouseleave event is triggered when you move the mouse over the div so removing the previously inserted text
20.10.2017 / 21:17