CSS + jquery響應式背景顏色變化

Question

我希望實現的目標是，如果窗口大小大於400，#box2顏色會變爲黑色（onhover on #box1），如果小於400,#box2顏色變成黃色。

我以爲我完成了這項任務，但是我發現我總是需要刷新頁面才能看到效果。一旦窗口大小改變，jQuery不會立即工作。

是否需要使用ajax或其他方法才能使jQuery響應工作？

在線樣本：這裏http://jsfiddle.net/dFbXr/

是我的代碼

HTML: 
    <div id="box1"> 
     <div id="box2"></div> 
    </div> 

jQuery: 
    function colorchange(){ 
    if($(window).width() > 400){ 
     $("#box1").mouseover(function(){ 
     $("#box2").css('background','black'); 
     }).mouseout(function(){ 
      $("#box2").css('background','blue'); 
    }); 
     }else{ 
    $("#box1").mouseover(function(){ 
    $("#box2").css('background','yellow'); 
    }).mouseout(function(){ 
      $("#box2").css('background','blue'); 
    }); 
    } 
    }  

    colorchange(); 

CSS: 
    #box1{ 
     display: block; 
     background:red; 
     background-size: 100%; 
     position: relative; 
     padding-bottom: 60%; 
    } 

    #box2{ 
     display:block; 
     background:blue; 
     position:absolute; 
     height:70px; 
     width:70px; 
     right:50%; 
     top:50%; 
     margin: -35px -35px 0 0; 
     } 

Answer 1

你需要打電話給你colorchange()功能時，窗口大小時，雙方第一次加載頁面和。有一個「調整」事件，您可以用代碼處理這樣的：

$(window).on("resize",colorchange); 

注意colorchange作爲參數傳遞給.on() function沒有括號，即通過，colorchange不colorchange()。沒有parens傳遞函數的引用，parens立即調用函數並傳遞其結果。

演示：http://jsfiddle.net/dFbXr/1/

你剛纔提到的Ajax，但Ajax是完全無關手頭的問題：它是無需重新加載整個頁面發送和/或接收來自Web服務器的數據。

Answer 2

您只調用了colorchange()函數 - 任何時候調整窗口大小都需要再次調用它，否則它只會經過if-else一次。

你需要這個jQuery添加到您的代碼：

$(window).on("resize",colorchange); 

Answer 3

如果你只支持CSS3瀏覽器和不希望依賴於JavaScript，您可以使用媒體查詢來實現同樣的事情，通過屏幕尺寸改變:hover的效果。

下面是一個快速示例：http://jsfiddle.net/dFbXr/2/