鼠标悬停在身体​​背景上的图像中

Question

我正在使用一个菜单，当鼠标悬停时，该菜单会全屏显示图像。我让它适用于一个，但它失败了白色倍数图像。

图片挤压并显示它们之间的固定背景。我管理了＃34;挤压＆＃34;通过为每张图片添加一个脚本，但似乎没有这样做，并且还显示了图片之间固定的背景。

有什么想法吗？ :)

HTML

 

<div id="corps">
<div id="sommaire">
    <div id="MENUalexia">Alexia</div>
        <div id="BGalexia"></div>
    <div id="MENUmeaudre">Méaudre</div>
        <div id="BGmeaudre"></div>
</div>

CSS：

#MENUalexia{
    padding: 80px;
    font-family: Helvetica;
    position: absolute;
    z-index: 2;
}
#BGalexia{
    background: url("photos/bgalexia.jpg") no-repeat center fixed;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
     display: none;
     position: absolute;
     z-index: 1;
     width: 100%;
     height: 100%;
     margin:0;
     padding:0;
}
#MENUmeaudre{
     padding: 80px;
     top: 80px;
     position: absolute;
     z-index: 2;
}
#BGmeaudre{
    background: url("photos/bgmeaudre.jpg") no-repeat center fixed;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */

   display: none;
   position: absolute;
   z-index: 1;
   width: 100%;
   height: 100%;
   margin:0;
   padding:0;
}

JS：

<script>
$(function() {
$('.div1').hover(function() { 
    $('.div2').fadeIn(); 
}, function() { 
    $('.div2').fadeOut(); 
});
});
</script>