Question

答案：更新了Fiddle

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

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

我想要实现的是：原始图表将是可见的，直到鼠标悬停在一个写入内容的div框上，其中将使用与原图中完全相同的新图表替换原始图表。 350x350px的平方。

EDITED：我想要实现的是：原始的图表将是可见的，直到鼠标悬停在一个div框的书面内容上，将用一个新的图表替换原始的图表与350x350像素平方的原始图表完全相同的位置。然后，一旦鼠标离开了写入内容的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');
    });
});

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

JSFiddle-DEMO

Answer 2

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

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

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

希望这能回答你的问题

Answer 3

on

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

也许应该是这样的

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

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

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

您可以随心所欲地完成工作：http://jsfiddle.net/aswzen/4o6mn3pm/11/

但不推荐

Answer 4

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

Answer 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

Answer 6

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

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

到

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


  /**Working fiddle**/

Working fiddle here

图：Div hover然后显示图像

6 个答案: