So erstellen Sie eine floating-div mit jQuery

Wenn sich die Maus über Einem element einer bestimmten Klasse , einem anderen schwimmenden div B, die einen link enthält, sollte angezeigt werden. B sollte verschwinden, sobald die Maus hat Links A und B.

Wie kann ich das mit jQuery?
jsFiddle

var container = $('#container');
var area = $('.area'); //this is A
var position = area.offset();

var floating = $("<div />", {
        css : { "position"  :   "absolute",
                "top"       :   position.top - 30,
                "left"      :   position.left + 20,
                "border"    :   "1px solid #000",
                "padding"   :   "5px",
                "display"   :   "none",
                "z-index"   :   "100",
                "background-color"  :   "#F00"
        }
    })
        .text('Hello World'); //this is B

    container.css('position', 'relative');
    container.append(floating);

    function show() {
        floating.show();
    }

    function hide() {
        floating.hide();
    }

    area.on('mouseenter', show);
    area.on('mouseleave', hide);
    floating.on('mouseenter', function(event) {
        console.log("floating: mouseenter");
        area.off('mouseenter', show);
        area.off('mouseleave', hide);
    });
    floating.on('mouseleave', function(event) {
        console.log("floating: mouseleave");
        area.on('mouseenter', show);
        area.on('mouseleave', hide);
    });

Mein problem ist, dass evertime die Maus betritt, B, B, verschwindet schon. Muss ich das mit jQuery nicht nur CSS.

InformationsquelleAutor Explicat | 2014-03-12

Ich bin mir nicht sicher, warum du das floatende div in jQuery. Dies ist wahrscheinlich, wie ich erzielen würde, etwas ähnlich zu dem, was Sie wollen.

http://jsfiddle.net/A2gFb/6/

Einfach die versteckten schweben in der HTML -,

<div class="area">luptatum zzril
    <div class="fixed">Hello World!</div>
</div>

mit der richtigen CSS festgelegt.

.area {
    position: relative;
    color: #0F0;
    font-weight: bold;
    /* you may want to set the width/height here as well*/
}

.fixed {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid black;
    padding: 5px;
    z-index: 100;  /* Thanks Diego for pointing out the typo here */
    background-color: red;
    display: none;
}

Und die jQuery wäre so einfach:

$(".area").mouseenter( function() {
    $(".fixed").show();
});

$(".area").mouseleave( function() {
    $(".fixed").hide();
});

z-index wird nicht in Pixel gemessen.

InformationsquelleAutor d.yuk

2

Dem großen problem, das Sie haben, ist, dass das mouseleave-event für Ihre grüne text wird ausgelöst, bevor das mouseenter-für Ihre schwebende div. Um dies zu beheben, machte ich eine variable Strecke mit der Maus werden in den Schwimmer und verwendet ein setTimeout in die hide () - Funktion, um zu prüfen, ob diese variable nach 100 ms. Sie könnte wahrscheinlich niedriger gehen, wenn Sie waren besorgt über die Verzögerung. Hier ist die Geige.

Oben im javascript:
```
var inFloat = false;
```
Die hide () - Funktion wird:
```
function hide() {
    setTimeout(function(){
        if (!inFloat)
            floating.hide();
    },100);
}
```
Und Ihre schwebende Maus-events werden:
```
floating.on('mouseenter', function(event) {
    inFloat = true;
});
floating.on('mouseleave', function(event) {
    inFloat = false;
    floating.hide();
});
```
Haben Sie immer noch das Problem, dass die floating-div hat eine Feste position, dass es nichts mit der position der Maus, so kann es schwierig sein, den Mauszeiger über den link und gehen Sie dann zu floating div mal an.

InformationsquelleAutor Asymptote
0

nur hinzufügen:
```
floating.on('mouseenter', show);
floating.on('mouseleave', hide);
```
funktioniert es auf jsFiddle.

Durch die Art und Weise, ich schlage vor, Sie nicht zu verwenden, "zeigen" und "verstecken" als name der Funktion, da Sie bereits in jQuery. showTooltip und hideTooltip kann gut sein Namen.

InformationsquelleAutor MrPk

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.