关于div和jquery

Question

我有一个大div和一个小div。大div具有与小div相同的布局，反之亦然。当我将鼠标悬停在小div上时，我希望小div中的所有内容都能替换大div中的所有内容。有没有办法做到这一点？如果是这样，我如何使用jquery应用它？这是一个例子：

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

也许这就是你要找的东西？

Answer 2

虽然我喜欢亚当的答案，但我会补充一点。

因为，您可能希望在离开后将div的内容恢复为原始内容：

var temp = $("#large-div").html();
$("#small-div").hover(function(){
  $("#large-div").html($(this).html());
}, function(){
   $("#large-div").html(temp)
});

修改 基于海报中添加的代码。首先，将标记更改为正确关闭：

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

接下来，您可以添加以下代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // The content div is passed in as a string jQuery Selector "#bcontainer"
    // The div to Replace is passed in as string jQuery Selector "#hcontainer"
    function replaceOnHover(contentDiv, divToReplace){
        var temp;
        $(contentDiv).hover(function(){
            temp = $(divToReplace).html();
            $(divToReplace).html($(this).html());
        }, function(){
            $(divToReplace).html(temp)
        });
    };
</script>

由于我不知道哪个div基于您的问题，所以这是一种使用此页面显示它的方法：

如果您使用的是带控制台或FireBug的浏览器：
点击F12
粘贴我的脚本标签中包含的功能并点击运行（或在大多数情况下输入） 然后，使用replaceOnHover（“＃question-header”，“#question”）调用;
当您将鼠标悬停在问题标题“关于div和jquery”时，您的问题文本将更改为与标题相同，并且当您停止悬停时，它将更改回来。

Answer 3

我会说

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

因为你可能想要这样做一次，而不是一直在盘旋。