Show #id - hide #id when hover another #id

How can make in jQuery something like this:

<div id="principal-id"></div> // this is principal id what is displayed

<div id="hover-id"></div> // when I hover #hover-id I want the #principal-id to disappear and change with <div id="this-id"><开发者_JAVA百科;/div>. But is a way when I'm with cursor on #this-id to stop change, and when the cursor is moved outside return to normal?

I hope you understand...

Thanks!

---

This should solve your problem. When I mouseover (hover) over hover-id, the principal-id will be hidden, and when I move my mouse cursor away from the hover-id, the principal-id will once again be displayed:

   // 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');
   });                

---

Use jQuery's hover and toggle magic:

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

But just make sure #this-id is initially hidden, through any of the below options:

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

---

Use the .hover():

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

---

$(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.               

---

this is a little cleaner:

<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);

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