JQuery zeigen DIV auf einem anderen DIV auf Mouseover

Question

Ich weiß, dass dies eine einfache Lösung haben kann, aber ich bin ein Jquery noob. Bitte, helfen Sie. Wie kann ich einen DIV auf einem anderen DIV beim Mouseover zeigen?

Beispiel, ich habe dies:

<div class="box"> Info about a game </div> 

Ich möchte "Overlay" ein anderes div auf der div "Box"

<div class="overlay"> Play </div> 

Wie kann ich das mit JQuery?

Sorry und danke im Voraus!

Answer 1

Wenn ich Sie richtig verstehe, möchten Sie nur overlay anzeigen, wenn Sie über box schweben.

Sie CSS psuedo verwenden könnte :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/

---

Wenn Sie lieber Animation/jquery verwenden die overlay zum Anzeigen/Verbergen können Sie Folgendes verwenden:

$(function(){ 
    $(".box").hover(function(){ 
     $(this).find(".overlay").fadeIn(); 
    } 
        ,function(){ 
         $(this).find(".overlay").fadeOut(); 
        } 
        );   
});​ 

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

Answer 2

Sie können ein weiteres DIV-Element mit der Klasse 'about' haben, das sich dort befindet, wo Sie möchten. Und wird CSS-Stil haben: Opazität: 0;

dann in JS haben Sie wenig Skript zu schreiben, das in onload/Ready-Funktion, so etwas befinden wird:

wird

$(document).ready(function() { 
    $('div.box').hover(function() { 
    $(this).children('.overlay').fadeIn(); 
    }, function() { 
    $(this).children('.overlay').fadeOut(); 
    }); 
}); 

Wenn dieses Element etwas auf sein überlagert, dann ist es besser, Verwenden Sie das CSS-Attribut 'display: none', um zu verhindern, dass dieses transparente Element Mausereignisse übernimmt.

Answer 3

Hier ist eine Möglichkeit, dies mit nativem JavaScript zu tun (keine jQuery-Bibliothek erforderlich). Wenn Sie nicht ES6 verwenden, können Sie die arrow functions mit regelmäßigen alten function expressions ersetzen:

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>