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!

+3


source to share


3 answers


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();
                    }
                   );        
});​

      

http://jsfiddle.net/Curt/BC4eY/2/

+31


source


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.

+3


source


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>
      

Run code


0


source







All Articles