jQuery append（）问题

Question

我有2张图片作为背景图片，1张作为前景图片

css如下：

#backImage{
    position: absolute;
    float: left;
    z-index: 0;
}

#mainImage{
    float: left;
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 10px;
}

加价如下：

<div id="homepageCarousel">
    <img id="backImage" src="discreet images/white_bg.png" />
        <img id="mainImage" src="discreet images/homepage_img1.jpg" />  
    //some other divs
</div>

我的顶部有一个导航栏，

当我将鼠标悬停在条形图中的每个项目上时，mainImage应该会出现，并且应显示与导航项目对应的图像。

我如何在jQuery中执行此操作，这是我迄今为止所做的:(目前，我只是尝试remove()和append() mainImage）

$("#navigation li").mouseover(function(){
        $("#mainImage").remove();
    }).mouseout(function(){
        $("#backImage").append("<img id='mainImage' 
           src = 'discreet images/homepage_img1.jpg' />");
});

Answer 1

我建议只更改src元素的img属性，而不是追加和删除元素，因为这些元素是昂贵的操作。

Answer 2

您正在从我认为的DOM中删除#mainImage，因此它无法返回。最好将$('#mainImage').style.display更改为inline或none，反之亦然#backImage，并将它们都加载。

每次从DOM中删除它们都有点笨拙。

Answer 3

较便宜的操作是隐藏和显示主图像：

var $main = $("#mainImage");

$("#navigation li").mouseover(function() {
  $main.hide();
}).mouseout(function() {
  $main.show();
});