how do I make a word appear inside a DIV while hovering over it?
how do I make a word appear inside a DIV while hovering over it?
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>
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