JQuery showing DIV on another DIV on mouse
I know this might be a simple solution, but I am a JQuery noob. Please help. How can I show a DIV to another DIV on mouseover?
Example: I have this:
<div class="box"> Info about a game </div>
I want to "overlay" another div in a div field "
<div class="overlay"> Play </div>
How can I do this using JQuery?
Sorry and thanks in advance!
source to share
If you understood correctly, you want to display overlay
on hover over box
.
You can use CSS psuedo :hover
:
<div class="box">
Info about a game
<div class="overlay"> Play </div>
</div>
div.box div.overlay
{
display:none;
}
div.box:hover div.overlay
{
display:block;
}
http://jsfiddle.net/Curt/BC4eY/
If you want to use animation / jquery to show / hide overlay
you can use the following:
$(function(){
$(".box").hover(function(){
$(this).find(".overlay").fadeIn();
}
,function(){
$(this).find(".overlay").fadeOut();
}
);
});
source to share
You can have another DIV with the "about" class positioned where you want. And will have CSS style: Opacity: 0;
Then, in JS, you need to write a little script that will be in the onload / ready function, something like this:
$(document).ready(function() {
$('div.box').hover(function() {
$(this).children('.overlay').fadeIn();
}, function() {
$(this).children('.overlay').fadeOut();
});
});
If this element will overlap something from above, it is best to use the "display: none" CSS attribute to prevent this transparent element from receiving mouse events.
source to share
Here's a way to do it using native JavaScript (no jQuery library). If you are not using ES6 , you can replace the function arrow with a regular old function expression :
var box = document.getElementById("box");
var overlay = document.getElementById("overlay");
var init = () => {
overlay.style.display = 'none'; //hide by default when page is shown
box.addEventListener('mouseover', () => {
overlay.style.display = 'inline';
});
box.addEventListener('mouseout', () => {
overlay.style.display = 'none';
});
};
init();
<div id="box"> Info about a game<br />
<div id="overlay">Play</div>
</div>
source to share