图：Div 悬停然后显示图像

Question

已回答：已更新Fiddle

我有一个图表（一个 .png 图像）放置在 window 中心的一个 350x350 像素的正方形中。

然后我在 window 周围的固定位置放置了 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

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

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

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

希望这能回答您的问题

Answer 2

在

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

也许应该是这样的

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

已回答 fiddle：http://jsfiddle.net/aswzen/4o6mn3pm/6/

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

如你所愿的完整工作小提琴：http://jsfiddle.net/aswzen/4o6mn3pm/11/

但不推荐

Answer 3

到Set aCSS属性

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

至Set Multiple CSS 属性

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

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

Detail

将[]替换为{}，如

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

Answer 4

首先你必须更改 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

Answer 5

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

Answer 6

使用 jquery 将显示更改为阻止有一些问题。只需更改

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

到

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


  /**Working fiddle**/

Working fiddle here

图：Div 悬停然后显示图像

Diagram: Div hover then Displays Image

javascript

css

jquery

image

hover