✔ Box bei Mouseover oder Click anzeigen an einer bestimmten Position

[Purdey]

Hallo Zusammen,

ich würde gern wie in Google Mail eine Box einblenden lassen, wenn ich auf einen Button klicke oder mit der Mouse drüber fahre.

Siehe Abbildung

Prinzipiell hätte ich mir das ganze ja in etwa so gedacht.

<div class="container">
    <input type="button" value="Click oder Hover ">

    <div class="box">
        Inhalt
    </div>
</div>?

Die .box Class ist quasi zunächst ausgeblendet und wird dann via JQuery eingeblendet.

$(document).ready(function() {
    $('.container').hover(function() {
        $(this).children('.box').show();        
    }, function() {
        $(this).children('.box').hide();
    });        
});?

Doch wie kann ich jetzt in den Code integrieren das die Box an einer bestimmten Position in Abhängigkeit von dem Button befindet. Bspw. soll Sie an der rechten unten Ecke beginnen und einen Abstand von 10px von der Box haben und eine Breite von 200px. Klicke ich außerhalb der Box so soll Sie ausgeblendet werden.

Könnt Ihr mir helfen?

 

[BocaSpanky]

Hi,

zunächst musst du deiner .box das css attribut "display: none;" geben, sofern du das noch nicht gemacht hast.
Ebenfalls position: absolute;
Dann kannst du deine .box positionieren wie du willst und wo du willst.

jquery:

$(document).ready(function() {
    $('.container').hover(function() {
        $('.box').toogle();        
    });        
});?

P.S. Ungetestet / So hätte ichs auf die schnelle gemacht!