Show #id - hide #id when hovering over another #id

Question

How to do something like this in jQuery:

<div id="principal-id"></div>// this is the main identifier displayed

<div id="hover-id"></div>// when I hovered # hover-id, I want # main-id to disappear and change from <div id="this-id"></div>. But is there a way, when I have the cursor on # this-id, to stop the change, and when the cursor has moved outside the limits of returning to the normal state?

I hope you understand...

Thank!

Answer 1

it's 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/

Answer 2

. hover-id, , -, :

   // 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 3

Use jQuery hoverand togglemagic:

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

But just make sure that #this-idit is initially hidden using any of the following options:

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

Answer 4

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

Use .hover():

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