我有一个页面设置，以便有载于一个3x2的块中的页面（中箱左）。

当用户点击一个标志，另一格旁边的标识块的变化（中箱右）的内容，装载4缩略图图标重新presenting 4个不同的数据集。

我想现在要做的是这样的：

当用户悬停在4缩略图图像中的一个，它用含有有关选择的缩略图图像的信息的隐藏的div（中间盒RIGHT1）的内容的标识块。而当他们移动鼠标关闭缩略图，标志块再次出现。

现在，点击标志装入第一个div完全正常的内容，但是将鼠标悬停在第二个div不会导致标识块中的图像被替换为中期箱RIGHT1隐藏DIV的内容

我把它设在下列方式：

 ＆LT; D​​IV ID =HiddenContainerOne的风格=显示：无;＆GT;
    ＆所述;股利的id =中期盒LEFT1＆GT;＆所述; A HREF =＃类=testbox1＆GT;＆所述;  - 内容此处 - ＆GT;＆所述; / a取代;＆所述; /格＆GT;
＆LT; / DIV＆GT;

＆LT; D​​IV ID =HiddenContainerTwo的风格=显示：无＆GT;
    ＆所述;股利的id =中期盒RIGHT1＆GT;＆所述;  - 内容此处 - ＆GT;＆所述; / a取代;＆所述; /格＆GT;
＆LT; / DIV＆GT;

＆LT; D​​IV ID =中等箱右侧＆GT;
    ＆LT; A HREF =＃级=标志变＆GT;＆LT;  - 标志在这里 - ＆GT;＆LT; / A＆GT;
＆LT; / DIV＆GT;

＆LT; D​​IV ID =中等盒子左＆GT;
    ＆LT;  - 内容在这里 - ＆GT;
＆LT; / DIV＆GT;
 

和JQuery的情况如下：

  $（文件）。就绪（函数（）{

$（标志变）。点击（函数（）{
    $（＃年年中左）。淡出（500，函数（）{
        $（＃年年中左）。HTML（$（＃中期箱LEFT1）。HTML（））
        。隐藏（）
        .fadeIn（500，函数（）{
            $（'＃年年中左'）;
        }）;
    }）;
    返回false;
}）;

$（testbox1）。鼠标悬停（函数（）{
        $（＃年年中右）。HTML（$（＃中期箱RIGHT1）。HTML（））
        。隐藏（）
        .fadeIn（500，函数（）{
            $（'＃年年中右）;
        }）;
    返回false;
}）;
}）;
 

解决方案

现在的问题是，你复制的hiddencontainerone的HTML

  $（'富'）HTML;
 

这不复制的事件。因此，鼠标悬停事件不复制链接存在。您应该使用克隆或之后副本，而不是重新绑定你的事件处理程序。

另外，你可以使用在和监视鼠标悬停事件的更高层次的节点。

http://jsfiddle.net/jByc7/

  $（'身体'）。在（鼠标悬停，.testbox1'，函数（）{
        的console.log（'鼠标悬停'）;
        $（＃年年中右）。HTML（$（＃中期箱RIGHT1）。HTML（））
        。隐藏（）
        .fadeIn（500，函数（）{
            $（'＃年年中右）;
        }）;
    返回false;
}）;
 

I have a page set up so that there are several company logos set out in a 3x2 block on the page (mid-box-left).

When the user clicks on a logo, the contents of another div (mid-box-right) next to the logo block changes, loading 4 thumbnail icons representing 4 distinct sets of data.

What I want to do now is this:

When the user hovers over one of the 4 thumbnail images, it replaces the logo block with the contents of a hidden div (mid-box-right1) containing the information relevant to the thumbnail image selected. And when they move the mouse off the thumbnail, the logo block reappears.

Right now, clicking on the logo loads the content of the first div perfectly fine, but hovering over the image in the second div does not result in the logo block being replaced with the content from the mid-box-right1 hidden div.

I have it set up in the following way:

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

And the JQuery is as follows:

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

The problem is that you are copying the html of the hiddencontainerone

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

This does not copy events. So the mouseover event doesn't exist on the copied link. You should use clone or rebind your event handler after copy instead.

Alternately you could make use of on and monitor a higher level node for the mouseover event.

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