Wie man ein popup-div-bewegen Sie die Maus über eine Verknüpfung in jquery?

Wie man ein popup-bewegen Sie die Maus über eine Verknüpfung in jquery? 

<div id="floatbar">
    <a href="" onclick="make it float 10px under this yay">
</div>
  • Konnte Sie zumindest eine Zeichnung/screenshot von dem, was es Aussehen sollte? Dies ist nicht genug Informationen, um mit zu arbeiten.
  • Bitte genauer sein. Beziehen Sie sich auf einen tooltip?
InformationsquelleAutor Steven Hammons | 2011-03-11
  1. 12

    den jquery

    $("#floatbar").click(function(e){
    e.preventDefault();
    $(this).find(".popup").fadeIn("slow");
});

    css

    #floatbar {
    position:relative;
}

.popup {
    position:absolute;
    top:10px;
    left:0px;
    height:30px;
    background:#ccc;
    display:none;
}

    den html -

    <a id="floatbar" href="#">
    <div class="popup">Hi there</div>
    click here
</a>
    • +1 halte es Kurz und Einfach 🙂
    • Es scheint nicht zu funktionieren hier: jsfiddle.net/76S6F
    • Hey Anderson, Seine Arbeit, seine nur, es gibt nichts zu klicken, da war kein text in dem link. Siehe meine edits oben. oder besuchen Sie einfach Ihre jsfiddle demo und die Wörter "hier klicken" in die a-tags nur unter der popup-div.
    InformationsquelleAutor Ed Fryed
  2. 11

    Reine css-Lösung:

    <div id="floatbar">
    <a href="" onclick="make it float 10px under this yay">Link</a>
    <div class="box">Popup box</div>
</div>

.box {
     display:none;
     position: absolute;
     top: 30px; 
     left: 10px;
    background: orange;
    padding: 5px;
    border: 1px solid black;
}

a:hover + .box {
     display:block;   
}

    Alles, was Sie tun müssen ist, fügen Sie ein <div class="box">(popup text)</div> unter dem link und dann funktioniert es für jeden link, der hat so eine box.

    http://jsfiddle.net/mcdqt/

    • Auf mouseLeave .box div ausgeblendet ist. So kann ich nicht halten, Maus auf das gezeigte .box div. Wie kann ich auch mit der .box-div, wenn es gezeigt wird?
    InformationsquelleAutor Stephan Muller
  3. 1

    Vielleicht ist es einfacher, wenn Sie so etwas wie Fancybox für jQuery oder eine andere Lightbox-alternative?

    InformationsquelleAutor René Höhle
Schreibe einen Kommentar