#id anzeigen - #id ausblenden, wenn der Mauszeiger über einer anderen #id schwebt

Question

Wie kann man in jQuery etwas wie dieses machen:

<div id="principal-id"></div> // dies ist die Hauptkennung, die angezeigt wird

<div id="hover-id"></div> // wenn ich den Mauszeiger über #hover-id bewege, soll die #principal-id verschwinden und sich mit <div id="this-id"></div> . Aber ist ein Weg, wenn ich mit dem Cursor auf #this-id zu stoppen ändern, und wenn der Cursor außerhalb zurück zu normal bewegt wird?

Ich hoffe, Sie verstehen...

Danke!

Answer 1

Damit sollte Ihr Problem gelöst sein. Wenn ich mit der Maus über die hover-id fahre, wird die principal-id ausgeblendet, und wenn ich den Mauszeiger von der hover-id wegbewege, wird die principal-id wieder angezeigt:

   // define the mouseover event for hover-id
   $('#hover-id').mouseover(function() {
         $('#principal-id').css('display','none');
   });

   // define the mouseout event for hover-id       
   $('#hover-id').mouseout(function() {
         $('#principal-id').css('display','block');
   });

Answer 2

Verwenden Sie die jQuery hover y toggle Magie:

$('#hover-id').hover(function () {
    $('#principal-id, #this-id').toggle();
});

Aber vergewissern Sie sich einfach #this-id zunächst ausgeblendet ist, durch eine der folgenden Optionen:

1. CSS: #this-id {display: none;}
2. Inline-CSS: <div id="this-id" style="display: none">
3. JavaScript: $('#this-id').hide();

Answer 3

$(document).ready(function(){
    $("#hover-id").mouseover(function() {
         $('#principal-id').hide();
   });

   $('#hover-id').mouseout(function() {
         $('#principal-id').show();
   }); 
});

// you didn't close the ready function correctly.

Answer 4

Verwenden Sie die .hover() :

$("#hover-id").hover(function(){
              $("principal-id").hide();
            }, 
            function(){
              $("principal-id").show();
            });

Answer 5

Das ist ein bisschen sauberer:

<div id="hover-id" style="border:1px solid black">hover over me</div>

<div id="principal-id">normal</div>
<div id="this-id" style="display:none">replacement</div>

var hover = function(){
    $('#principal-id').toggle();
    $('#this-id').toggle();
};

$('#hover-id').mouseenter(hover).mouseleave(hover);

wie in: http://jsfiddle.net/HQQAV/