August 24, 2010
description box on mouseover
Question by Артём Царионов
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 decription 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 i need it to disappear once i move the mouse to a different object
Answer by casablanca
Assuming popup is the ID of your “description box”:
HTML
<div id="parent">
This is the main container.
<div id="popup" style="display: none">some 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;
}
Answer by Starx
Well, I made a simple two liner script for this, Its small and does what u want.
Check it
http://jsfiddle.net/9RxLM/
Its a jquery solution 😀
