图：div 悬停然后显示图像答案

【问题标题】：Diagram: Div hover then Displays Image图：div 悬停然后显示图像
【发布时间】：2015-08-06 15:07:01
【问题描述】：

回答：更新Fiddle

我有一个图表（.png 图像），它位于窗口中心的 350x350 像素正方形中。

然后我在窗口周围的固定位置有 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']);
  });
});

【问题讨论】：

查看我的答案，它完全符合您的要求。
感谢大家的快速响应。我没有完全正确地解释自己（对此感到抱歉），但我现在已经编辑了我的帖子。 @KawineshSK 你的答案正是我想要的。谢谢
没问题，把它标记为已回答:)
完成了，请问为什么在 jquery 中还没有用到的时候，又多了一个var，叫$image？
抱歉你可以删了，仅供参考。

标签： javascript jquery css image hover

【解决方案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');
    });
});

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

JSFiddle-DEMO

【讨论】：

【解决方案2】：

到Set a CSS 属性

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

致Set Multiple CSS 属性

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

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

Detail

将[] 替换为{} 喜欢

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

【讨论】：

【解决方案3】：

使用 jquery 更改显示以阻止有一些问题。简单地改变

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

到

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


  /**Working fiddle**/

Working fiddle here

【讨论】：

【解决方案4】：

在

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

也许应该是这样的

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

回答小提琴：http://jsfiddle.net/aswzen/4o6mn3pm/6/

然后要使其可逆，您必须再次将原始状态显示在每个块上，就像灯开关一样。但是如果你使用display property 来做这件事，你可能做错了。

如您所愿的完整工作文件：http://jsfiddle.net/aswzen/4o6mn3pm/11/

但不推荐

【讨论】：

【解决方案5】：

首先您必须更改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");
}
});

DEMO

【讨论】：

【解决方案6】：

当您将鼠标悬停在某个 div 上时，您需要使其他图像不可见。图像 1、2、3、4、5。所有图像都相互重叠。如果将鼠标移到图像 2 上，则需要使图像 1、3、4、5 不可见。您可以添加可见性：隐藏在您制作的 jquery 中。

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

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

希望这能回答你的问题

【讨论】：