jQuery单击以显示不可见的div（添加类）在Internet Explorer中不起作用？

Question

我有一个“隐藏对象”游戏，其中包含您单击的热点，然后出现来表明您已找到该对象。 它在除IE8之外的所有浏览器中都很好用，我不知道为什么。

热点位于通过CSS设置的DIV：

 .hotspot {
  background-color: none;
  position: absolute;
}

#hs1 {
  width: 40px;
  height: 80px;
  top: 50px;
  left: 200px;
}    

然后是2，依此类推。有一个JQuery，它将单击时的此类与“ done”类交换：

.done {
  background-color: #ffff00;
  border: 1px solid #ff0000;
}

jQuery是

$('#hs1').click(function(){
        $('#textPanel .title').text("CORRECT!");
        $('#textPanel .body').text("blah blah");
        $(this).addClass('done');
        itemsLeft--;
        updateItemsLeft();
    });

就像我说的那样，这一切都可以在其他浏览器中使用。 这个问题似乎从干background-color:none -如果我改变了最初的风格background-color: #ccc ，它的作品（但随后的隐藏点不隐藏...）

我有任何建议吗？

Answer 1

我想是没有的价值none在background-color 。 尝试给background-color: transparent; 然后退房。 我想这可能有效！

这是IE的已知错误。 当您开始时，在$(document).ready()提供要在IE中加载页面后隐藏的代码：

$(document).ready(function(){
    $('#hs1').css('background-color', '#fff');
    $('#hs2').css('background-color', '#fff');
    $('#hs3').css('background-color', '#fff');
    $('#hs4').css('background-color', '#fff');
});

如果这不起作用，请在CSS中添加!important ：

.done {
  background-color: #ffff00 !important;
  border: 1px solid #ff0000;
}

希望这可以帮助！ :)