javascript - 图 : Div hover then Displays Image

Question

已回答:已更新 Fiddle

我有一个图表(.png 图像)，放置在窗口中心的 350x350px 正方形中。

然后，我在窗口周围的固定位置放置了 5 个 div 框。

我想要实现的是:原始图表将可见，直到鼠标悬停在写入内容的 div 框上，该图表将用新图表替换原始图表，其位置与原始图表完全相同350x350px 的正方形。

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

我是否只需要创建一个 if 语句将 display 属性恢复为 none ？

我创建了这个FIDDLE为基本骨架。

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

任何意见都将不胜感激。

JS

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

  $('.content-1').hover(function(){
    $diagram1.css(['display':'block']);
  });

  $('.content-2').hover(function(){
    $diagram2.css(['display':'block']);
  });

  $('.content-3').hover(function(){
    $diagram3.css(['display':'block']);
  });

  $('.content-4').hover(function(){
    $diagram4.css(['display':'block']);
  });

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

Answer 1

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

1. .css() API 语法错误，应该是 .css('display','block'); 而不是 .css([ '显示':'阻止']);
2. 您可以使用 mouseover 和 mouseenter 来轻松完成任务，而不是使用 hover

JSFiddle-DEMO