I am playing with the onmouseover
event in javascript
I would like a little box to pop up and remain up until there is no onmouseover
anymore
I think it's called a description box, but I am not sure.
How do I get a little box to pop up with custom text when I put my mouse over certain text, and disappear once I move the mouse to a different object..?
Assuming popup
is the ID of your "description box":
HTML
<div id="parent"> <!-- This is the main container, to mouse over -->
<div id="popup" style="display: none">description text here</div>
</div>
JavaScript
var e = document.getElementById('parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
Alternatively you can get rid of JavaScript entirely and do it just with CSS:
CSS
#parent #popup {
display: none;
}
#parent:hover #popup {
display: block;
}