cum să ascundeți o div pe mouseleave de la 2 divs în jquery?

întrebarea ar putea fi un fir cu fir, dar cu alte cuvinte am un meniu (consultați jsfiddle )

când staționez peste un div, obțin o picătură în jos. atunci când am mouseleleave drop down jos dispar. Până acum, bine.

problema este că vreau ca meniul să rămână deschis dacă mouse-ul se află peste cursorul deasupra.

ex: if($elem).not(":hover"){..}

un cod:

<div class="top_menu_item">
    <div class="hover_item">
        TEST
    </div>
    <div class="drop_item" style="display: none;">
        <div>
            My test
        </div>
        <div class="">
            Add test
        </div>
        <div>
            Remove test
        </div>
    </div>

$(document).ready(function() {
    var elem = new Array();
    var len = $(".hover_item").length;
    var i = 0;
    while (i < len) {
        elem[i] = $(".hover_item:eq(" + i + ")");

        i = i + 1;
    }
    $.each(elem, function (key, val) {
        hoverFunc(val);
    });

});

function hoverFunc($elem) {

    $elem.hover(function() {
        if ($elem.next().is(":hidden")) {
            $elem.next().slideDown("fast");
        }
    });

    $elem.mouseleave(function (e) {
       //here should be :  if the mouse is not hovering over the dropdown, then
        $elem.next().slideUp("fast");
    });

    $elem.next().mouseleave(function (e) {
        $elem.next().slideUp('fast');
    });
}

if someone can re-Fraze my question to say what i mean please do so.

thanks

0

2 răspunsuri

Nu aveți nevoie de JavaScript pentru a face acest lucru: soluție CSS .

Doar adăugați submeniul ( .drop_item ) ca element copil la elementul de declanșare ( .hover_item ) și adăugați un CSS:

.drop_item { display: none; }
.hover_item:hover .drop_item { display: block; }​
0
adăugat
Modificările CSS3 (googling care funcționează) o vor face să pară netedă
adăugat autor 11684, sursa
Dar +1, aproape că l-ați uitat
adăugat autor 11684, sursa
+1, dar vă rugăm să adăugați soluția dvs. CSS aici, nu lăsați răspunsul dvs. să moară cu link-ul.
adăugat autor gdoron, sursa

Încearcă asta.

Au fost adăugate evenimente de hover mouse-ul pentru NextElem. De asemenea, ați curățat variabilele pentru a fi mai eficiente, în loc de a face referire la elementul $ elem.Next (), doar setat

var nextElem = $elem.Next()

și a adăugat acest lucru

  nextElem.hover(function() {
    if ($elem.is(":hidden")) {
        $elem.slideDown("fast");
    }

});

http://jsfiddle.net/fmTnh/3/

0
adăugat