圖：DIV懸停然後顯示圖片

ANSWERED：更新Fiddle 圖：DIV懸停然後顯示圖片

我有被放置在位於所述窗口的中心的350x350px正方形的說明圖（一.PNG圖像）。

然後我在窗口周圍的固定位置有5個div框。

我想要實現的是：原始圖將可見，直到鼠標懸停在一個書寫內容的div框上，它將用原始圖與原始圖完全相同的位置替換原始圖在350x350px的廣場。

編輯：我想實現的是：原來的圖將是可見的，直到鼠標懸停在書寫內容的一個div框將替換爲新圖的原始圖中的完全相同的位置作爲350x350px正方形中的原始圖。然後一旦鼠標已經離開該書寫內容的Div盒就會顯示原始圖。

我只需要創建一個if聲明，將display聲音恢復爲none？

我已經創建了這個基本骨架的這個FIDDLE。

我以爲我是在正確的軌道上使用下面的jquery，但我似乎無法得到它的工作？

任何輸入將不勝感激。

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

來源

2015-05-25 Jargonaut_

見我的回答它正是你想要做什麼。 –

謝謝大家，您的反應非常快。我沒有完全正確地解釋自己（抱歉），但我現在編輯了我的文章。 @KawineshSK你回答正是我正在尋找的。謝謝 –

沒問題就把它標記爲回答:) –

$(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有fullfilling的簡單方法你的任務而不是hover

JSFiddle-DEMO

來源

2015-05-25 07:40:15

你需要做其他影像無形當你將鼠標懸停在某個div中。圖像1,2,3,4,5都是相互重疊的。如果您將鼠標放在圖像2上，則需要使圖像1,3,4,5不可見。你可以添加可見性：隱藏在你所做的jQuery中。

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

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

希望這回答了

來源

2015-05-25 07:33:03 Alz

上

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

也許它應該是這樣的

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

回答撥弄你的問題：http://jsfiddle.net/aswzen/4o6mn3pm/6/

，然後要使其可逆，必須將原始狀態顯示再次置於每個塊上，如燈開關。但是如果你使用display property來做這個，可能你做錯了。如你所願

全部工作filddle：http://jsfiddle.net/aswzen/4o6mn3pm/11/

，但不建議

來源

2015-05-25 07:34:35 aswzen

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

來源

2015-05-25 07:37:55 ozil

首先，你必須改變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

來源

2015-05-25 07:38:51

的變化顯示使用jquery到框有一定的問題。簡單地改變

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

到

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


    /**Working fiddle**/

Working fiddle here

來源

2015-05-25 07:43:05

圖：DIV懸停然後顯示圖片

回答

相關問題