jQuery onmouseover + onmouseout / schweben auf zwei verschiedenen divs

Ich habe da ein Problem:

Hier ein Teil meiner HTML:

<div id="div_1">
    Here Hover
</div>
<div id="div_2">
    Here content to show
</div>

Und hier ein Teil meiner jQuery-Skript:

jQuery('#div_2').hide();
jQuery('#div_1').onmouseover(function() {
    jQuery('#div_2').fadeIn();
}).onmouseout(function(){
    jQuery('#div_2').fadeOut();
});

Das Problem:

Wenn ich bewegen Sie die Maus über die div_1, die div_2 angezeigt wird, wenn ich hover aus, die div_2 versteckt ist, aber:

Wenn ich hover zuerst auf div_1 und gehen Sie dann über div_2, die div_2 verborgen ist schnell.

Habe ich versucht dies mit jQuery.addClass(); nach dem mouseout in div_1, aber nichts ändert sich.

Möchte ich nicht machen, das zweite div im ersten div... gibt es eine andere Möglichkeit mit jQuery?

Thx Ahmet

Um Sie zu beginnen, muss man den on Präfix für den mouseover/mouseout-event-Handler. Es ist nur jQuery('#div_1').mouseover(function(){...
das war eine mini-Kopie Fehler^^thx
Durch die Art und Weise, die Sie verwenden sollten, die hover Kürzel hinzufügen der Handler

InformationsquelleAutor ahmet2106 | 2010-03-08

  1. 14

    Hier ist ein anderer Ansatz, nur für den hover auf das zweite div auch so hört es sich versteckt:

    $(function() {
  $('#div_2').hide();
  $('#div_1, #div_2').hover(function() {
      $('#div_2').stop().fadeIn();
  }, function(){
      $('#div_2').stop().fadeOut();
  });
});
    Wenn ich dies in der Vergangenheit getan, es kann nachfolgende fade-in-Ereignisse verblassen nur teilweise Deckkraft. Stattdessen verwende ich api.jquery.com/fadeTo, die es mir erlaubt, geben Sie 0 und 1 für die Deckkraft.

    InformationsquelleAutor Nick Craver

  2. 2

    Den mouseleave-Funktion könnte das sein, was du suchst.

    InformationsquelleAutor Roch

  3. 0

    Der einfachste Weg, dies zu tun ist, um beide <div>s im inneren ein Dritter container <div>, dann gelten die hover-Effekt auf den container <div>.

    Durch die Art und Weise, die Sie verwenden sollten, die hover Kürzel hinzufügen der Handler.

    Es gibt mehr als 1 Div, welches zeigen unterschiedliche Inhalte in den anderen div, der bei mouseover, (ajax), so dass ich versuche nur, die Arbeit mit einem div
    Was meinst du?

    InformationsquelleAutor SLaks

  4. 0

    Versuchen Sie es mit hover() anstelle von mouseover() und mouseout().

    Schauen Sie sich diese Dokumentation Seite : http://api.jquery.com/hover/

    Hoffe, das hilft.

    versuchte schon :S

    InformationsquelleAutor Raja

  5. 0

    Fügen Sie die mouseover-handler #div_1, und die mouseout-handler zu #div_2. Diese Weise #div_2 wird angezeigt, wenn man mouseover #div_1, und es wird ausgeblendet, wenn Sie mouseout von #div_2 (statt sobald Sie mouseout von #div_1). Der einzige wirkliche Nachteil ist, dass, um zu verbergen das zweite div, müssen Sie den Mauszeiger über es zuerst.

    Etwas wie dieses:

    jQuery('#div_2').hide();
jQuery('#div_1').mouseover(function() {
    jQuery('#div_2').fadeIn();
});
jQuery('#div_2').mouseout(function(){
    jQuery('#div_2').fadeOut();
});

    InformationsquelleAutor Aaron

  6. 0

    Versuchen, Diesen code:

    $(function() {
    jQuery('#div_2').hide();
    jQuery('#div_1').mouseover(function() {
        jQuery('#div_2').fadeIn();
    });

    jQuery('#div_2').mouseout(function(){
        jQuery('#div_2').fadeOut();
    });
});
    gute Idee, nicht gedacht 🙂 Wenn ich es mal wieder benötige, kann ich dies versuchen 🙂 vielen Dank!

    InformationsquelleAutor Jafar Khan

Schreibe einen Kommentar