JQuery für einen div schwebt aus

Question

Ich weiß, dass dies eine hoverOver und hoverOut Funktion auf einem bestimmten id machen:

$(document).ready(function(){ 
    $("#link").hover(
     function(){ 
      $("#div").css({"display":"block"}); 
     }, 
     function(){ 
      $("#div").css({"display":"none"}); 
     } 
    ) 
}); 

Aber ich will die #div wie keine angezeigt werden, wenn die Maus aus dem Haupt div was jeden Inhalt mit id von #main enthält und auch ausblendet. Also lief ich dies:

$(document).ready(function(){ 
    $("#link").hover(
     function(){ 
      $("#div").css({"display":"block"}); 
     }; 
    $("#main").hoverOut(
     function(){ 
      $("#div").fadeOut('slow').css({"display":"none"}); 
     }; 
}); 

aber der Code ist nicht die #div wie keine Anzeige. Bitte bin noch neu bei jQuery, also brauche ich Hilfe von jedem mit einer besseren Idee. Hier ist der HTML-Code für bessere Erklärung:

<div id="main"> 
    <a href="javascript:;" id="link">hover here</a> 
    <div id="div">this is the content</div> 
</div> 

Answer 1

Sie können mouseenter() und mouseleave()

Per Dokumentation:

hover() Methode bindet Handler für beide mouseenter und mouseleave Veranstaltungen.

$(selector).hover(handlerIn, handlerOut) Aufruf ist eine Abkürzung für: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

$(document).ready(function() { 
 
    $("#link").mouseenter(function() { 
 
    $("#div").show(); // you can use show() method to show an element 
 
    }) 
 
    $('#main').mouseleave(function() { 
 
    $("#div").fadeOut('slow'); // fadeOut will hide the element, no need to hard-code css method 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <a href="javascript:;" id="link">hover here</a> 
 
    <div id="div">this is the content</div> 
 
</div>

Answer 2

Wenn Sie den Cursor Haupt div betritt zeigen es #div und wenn der Cursor verlassen Haupt div es #div dh Anzeige von verstecken Block zu zurück zu keiner.

JQuery,

$(document).ready(function(){ 
$("#main").mouseenter(function(){ 
    $("#div").css('display','block'); 
}); 
$("#main").mouseleave(function(){ 
    $("#div").css('display','none'); 
}); 
}); 

Answer 3

Ist das, was Sie meinen?

1. Verwenden JS Anfangszustand als display: none als Inline Style
2. einzustellen, wenn die Maus #LINK, Aufblenden #div
3. eintritt, wenn die Maus verlässt #main, verblassen #div

Beispiel:

$(document).ready(function() { 
    $("#div").css("display", "none"); 
    $("#link").on("mouseenter", function() { 
    $("#div").fadeIn('slow'); 
    }); 
    $("#main").on("mouseleave", function() { 
    $("#div").fadeOut('slow'); 
    }); 

}); 

http://codepen.io/anon/pen/oxrRJZ