Javascript 图：Div悬停然后显示图像

回答：已更新

我有一个图（一个.png图像）放在一个350x350px的正方形中，位于窗口的中心

然后我在窗户周围的固定位置有5个div框

我试图实现的是：原始图将是可见的，直到鼠标悬停在一个包含书面内容的div框上，该div框将用一个新图替换原始图，新图的位置与350x350px正方形中的原始图完全相同

编辑：我试图实现的是：原始图表将可见，直到鼠标悬停在一个包含书面内容的div框上，该div框将用一个与350x350px正方形中原始图表位置完全相同的新图表替换原始图表。 然后，一旦鼠标离开写入内容的Div框，就会显示原始图表

我是否只需要创建一个

if

语句，将

显示恢复为
无

我已经创建了一个基本的骨架

我认为我使用下面的jquery是正确的，但我似乎无法让它工作

如有任何意见，将不胜感激

JS

当您将鼠标悬停在某个分区上时，需要使其他图像不可见。图像1、2、3、4、5。所有这些都相互重叠。如果将鼠标放在图像2上，则需要使图像1、3、4、5不可见。您可以在所做的jquery中添加可见性：hidden

$('.content-1').hover(function(){

    $diagram5.css(['display':'block']);
    //get visibility code here
});    

希望这能回答您的问题

$diagram5.css(['display':'block']);

也许应该是这样

$diagram5.css('display','block');

小提琴回答说：

然后，为了使其可逆，你必须在每个块上再次显示原始状态，就像一个灯开关。但是如果使用
显示属性
执行此操作，则可能是做错了

如您所愿，完全可工作：

但不建议设置CSS属性

$("p").css("background-color", "yellow");  

设置多个CSS属性的步骤

要设置多个CSS属性，请使用以下语法：

css({"propertyname":"value","propertyname":"value",...});  


将
[]
替换为
{}
类似

$('.content-5').hover(function(){
    $diagram5.css({'display':'block'});
  });

首先，您必须更改
css
语法，然后在显示正确的图像之前，必须隐藏所有其他图像

 $(document).ready(function(){
var $diagram1 = $('.p1'),
    $diagram2 = $('.p2'),
    $diagram3 = $('.p3'),
    $diagram4 = $('.p4'),
    $diagram5 = $('.p5');

$('.content-1').hover(function(){
    hide();
    $diagram1.css('display','block');
});

 $('.content-2').hover(function(){
     hide();
    $diagram2.css('display','block');
});

 $('.content-3').hover(function(){
     hide();
    $diagram3.css('display','block');
});

 $('.content-4').hover(function(){
     hide();
   $diagram4.css('display','block');
});

 $('.content-5').hover(function(){
     hide();
    $diagram5.css('display','block');
});
function hide()
{
    $(".p1,.p2,.p3,.p4,.p5").css("display","none");
}
});

JS

$(document).ready(function(){
    var $diagram1 = $('.p1'),
        $diagram2 = $('.p2'),
        $diagram3 = $('.p3'),
        $diagram4 = $('.p4'),
        $diagram5 = $('.p5'),
        $image=$('.image_container img');

    $('.content-1').mouseover(function(){

        $diagram1.css('display','block');
    }).mouseout(function() {
        $diagram1.css('display','none');
    });

     $('.content-2').mouseover(function(){
        $diagram2.css('display','block');
    }).mouseout(function() {
        $diagram2.css('display','none');
    });

     $('.content-3').mouseover(function(){
        $diagram3.css('display','block');
    }).mouseout(function() {
        $diagram3.css('display','none');
    });

     $('.content-4').mouseover(function(){
        $diagram4.css('display','block');
    }).mouseout(function() {
        $diagram4.css('display','none');
    });

     $('.content-5').mouseover(function(){
        $diagram5.css('display','block');
    }).mouseout(function() {
        $diagram5.css('display','none');
    });
});

.css（）
api语法错误，应该是
.css（'display'，'block'）而不是
.css（['display'：'block']）

您可以使用
mouseover
和
mouseenter
轻松完成任务，而不是
hover
使用jquery将显示更改为块有一些问题。
简单地改变

  $diagram1.css(['display':'block']);

到

请看我的答案，它完全符合您的要求。谢谢大家的快速回复。我没有正确地解释我自己（很抱歉），但我现在已经编辑了我的帖子@你的答案正是我想要的。谢谢你没问题只需将其标记为已回答：）完成，我可以问一下，为什么在jquery中没有使用它时，会额外添加一个名为
$image
的
var
？很抱歉，您可以删除它，这是为了我的参考。
  $diagram1.css(['display':'block']);

     $diagram1.css("display", "block");


  /**Working fiddle**/