Question

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"></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!

Answer 1

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/