Jquery click to show invisible div (add class) not working in Internet Explorer? -
i have "hidden object" game hot spots click appear show found object. works great in browsers except ie8 , can't figure out why.
the hot spots positioned divs, set css:
.hotspot { background-color: none; position: absolute; } #hs1 { width: 40px; height: 80px; top: 50px; left: 200px; }
and 2, etc. there jquery swaps class on click "done" class:
.done { background-color: #ffff00; border: 1px solid #ff0000; }
the jquery
$('#hs1').click(function(){ $('#textpanel .title').text("correct!"); $('#textpanel .body').text("blah blah"); $(this).addclass('done'); itemsleft--; updateitemsleft(); });
as said, works in other browsers. problem seems stem background-color:none
-- if change initial style background-color: #ccc
, works (but hidden spots not hidden...)
i stuck suggestions?
i guess there no value of none
in background-color
. try giving background-color: transparent;
, check out. guess might work!
this known bug ie. when start, in $(document).ready()
give code hide after page has loaded in ie:
$(document).ready(function(){ $('#hs1').css('background-color', '#fff'); $('#hs2').css('background-color', '#fff'); $('#hs3').css('background-color', '#fff'); $('#hs4').css('background-color', '#fff'); });
if doesn't work, in css, please add !important
:
.done { background-color: #ffff00 !important; border: 1px solid #ff0000; }
hope helps! :)
Comments
Post a Comment