Question

I have a big div and a small div. The big div has the same layout as the small div vice versa. When I hover over the small div, I want everything in the small div to replace everything in the big div. Is there a way to do this? If so, how can I apply this using jquery? Here’s an example:

<div id="container">
<div id="header">      <div id="hcontainer">
    <h1>Test1</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>   </div>  <div id="bcontainer">    <div class="first">
    <h2>Test2</h2>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div> </div>

Answer 1

$('#small-div').mouseenter(function() { 
    $('#large-div').html($(this).html());
});

Maybe that’s what you’re looking for?