我的jQuery在Chrome中工作，但不是IE 11

Question

下面我有我的HTML，CSS和jQuery。當你將鼠標懸停在它們上面時，它應該突出顯示框內的正方形。它在Chrome中沒有問題，但在IE 11中不起作用。我對編碼非常陌生，幾個星期前剛開始使用HTML，CSS和Javascript。謝謝，

//Document Startup 
 
$(document).ready(function(){ 
 
    var divs = '#container div' 
 
    var cSize = 960 
 
    var cSizepx = cSize+'px' 
 
    var divNum = 16 
 
    var divSize = cSize/divNum 
 
    var divSizepx = divSize+'px' 
 
    var squares = divNum*divNum 
 
    $('#container').css({'height':cSizepx,'width':cSizepx,'border':"1px solid black"}) 
 

 
    for (var x = 1; x <=squares; x++){ 
 
    $('#container').append('<div></div>') 
 
    } 
 
    $(divs).css({'height':divSizepx,'width':divSizepx}) 
 

 

 
    $(divs).hover(function(){ 
 
    var r = Math.floor((Math.random())*256) 
 
    var g = Math.floor((Math.random())*256) 
 
    var b = Math.floor((Math.random())*256) 
 
    var color = 'rgb('+r+','+g+','+b+')' 
 
    if ($(this).css("background-color") === 'rgba(0, 0, 0, 0)'){ 
 
     $(this).css("background-color", color); 
 
    } 
 
    }) 
 

 

 
    //Document after button press 
 
    $(document).on('click','button',function(){ 
 
    $(divs).remove(); 
 
    var divNum = prompt("How many squares across would you like?") 
 
    var divSize = cSize/divNum 
 
    var divSizepx = divSize+'px' 
 
    var squares = divNum*divNum 
 
    for (var x = 1; x <=squares; x++){ 
 
     $('#container').append('<div></div>') 
 
    } 
 
    $(divs).css({'height':divSizepx,'width':divSizepx, 'display':'inline-block'}) 
 

 
    $(divs).hover(function(){ 
 
     var r = Math.floor((Math.random())*256) 
 
     var g = Math.floor((Math.random())*256) 
 
     var b = Math.floor((Math.random())*256) 
 
     var color = 'rgb('+r+','+g+','+b+')' 
 
     var count = parseInt($(this).data('count'), 10) + 1; 
 
     ; 
 

 
     if ($(this).css("background-color") === 'rgba(0, 0, 0, 0)'){ 
 
     $(this).css("background-color", color); 
 
     } 
 
    }) 
 

 
    }) 
 

 
});

#container div{ 
 
    float:right; 
 
} 
 

 
#container{ \t position:absolute; 
 
    top:0px; 
 
    display:inline-block; 
 
} 
 

 
#instructions{ 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:80px; 
 
    left:980px; 
 
    font-family:cursive; 
 
    width:205px; 
 
    text-align:center; 
 
} 
 

 
button{ 
 
    position:absolute; 
 
    left:980px; 
 
    display:inline-block; 
 
    top:10px; 
 
    font-family:serif; 
 
    font-size:3em; 
 
    width:205px; 
 
    background-color:#0186ea; 
 
    color:white; 
 
    border-radius:10px; 
 
    border-width:0px; 
 
    display:inline-block; 
 
} 
 
button:hover{ 
 
    background-color:#0192ea; 
 
    border-radius:10px; 
 
    border-width:0px; 
 
} 
 
button:active{ 
 
    background-color:#0186ea; 
 
    border-radius:10px; 
 
    border-width:0px; 
 
} 
 
button:visited{ 
 
    background-color:#0186ea; 
 
    border-radius:10px; 
 
    border-width:0px; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<button>Reset</button> 
 
<div id='instructions'>The button above will clear your space and set a new number of squares per line.</div> 
 
<div id="container"></div>

Answer 1

IE報告該background-color屬性作爲代替 '透明' 'RGBA（0，0，0，0）'。嘗試檢查時，如果背景色爲默認顏色使用下列條款爲您的if語句：

if ($(this).css("background-color") === 'rgba(0, 0, 0, 0)' || $(this).css('background-color') === 'transparent'){ 
    $(this).css("background-color", color); 
} 

搗鼓證明：http://jsfiddle.net/b64jLfqh/