将鼠标悬停在另一个 div 上时更改 div 的内容

Question

我设置了一个页面，以便在页面的 3x2 块（左中框）中设置几个公司徽标。

当用户单击徽标时，徽标块旁边的另一个 div（中间框右侧）的内容会发生变化，加载代表 4 个不同数据集的 4 个缩略图图标。

我现在想做的是：

当用户将鼠标悬停在 4 个缩略图图像之一上时，它会将徽标块替换为隐藏 div（中间框-right1）的内容，其中包含与所选缩略图图像相关的信息。当他们将鼠标从缩略图上移开时，徽标块会重新出现。

现在，单击徽标可以很好地加载第一个 div 的内容，但是将鼠标悬停在第二个 div 中的图像上不会导致徽标块被 mid-box-right1 隐藏 div 中的内容替换.

我是这样设置的：

<div id="HiddenContainerOne" style="display:none;">
    <div id="mid-box-left1"><a href="#" class="testbox1"><-- content here --></a></div>
</div>

<div id="HiddenContainerTwo" style="display:none">
    <div id="mid-box-right1"><-- content here --></a></div>
</div>

<div id="mid-box-right">
    <a href="#" class="logo-change"><-- logo here --></a>
</div>

<div id="mid-box-left">
    <-- content here -->    
</div>

而JQuery如下：

$(document).ready(function() {

$(".logo-change").click(function() {
    $("#mid-box-left").fadeOut(500, function() {
        $("#mid-box-left").html($("#mid-box-left1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-left');
        });
    });
    return false;
});

$(".testbox1").mouseover(function() {
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});
});

Answer 1

问题是你在复制hiddencontainerone的html

$('foo').html($('link').html());

这不会复制事件。因此，复制的链接上不存在 mouseover 事件。您应该使用clone 或在复制后重新绑定您的事件处理程序。

或者，您可以使用on 并监视更高级别的节点以查找鼠标悬停事件。

http://jsfiddle.net/jByc7/

$('body').on('mouseover', '.testbox1', function() {
        console.log('mouseover');
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});​

Answer 2

用这个包装你的 jquery 代码

检查文档是否加载了所有的html元素

$(document).ready(function(){

//your jquery code

 });