Question

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

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

我现在想做的是：

当用户将鼠标悬停在4个缩略图图像中的一个上时，它将徽标块替换为包含与所选缩略图图像相关的信息的隐藏div（mid-box-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());

这不会复制事件。因此，复制的链接上不存在鼠标悬停事件。您应该使用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

 });

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

2 个答案: