我的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{ 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報告背景顏色屬性為“透明”而不是“ rgba（0，0，0，0）”。 在檢查background-color是否為默認顏色時，嘗試對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/