0

ホットスポットをクリックすると、オブジェクトを見つけたことを示すように見える「隠しオブジェクト」ゲームがあります。IE8 を除くすべてのブラウザで問題なく動作しますが、その理由がわかりません。

ホット スポットは配置された DIV であり、CSS で設定されます。

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

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

そして2など。クリック時にこのクラスを「完了」クラスと交換するJQueryがあります。

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

Jクエリは

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

私が言ったように、これはすべて他のブラウザで動作します。問題はbackground-color:none、最初のスタイルを に変更するbackground-color: #cccと機能するようです (ただし、隠しスポットは隠されません...)

何か提案はありますか？

4

1 に答える 1

0

noneinの値はないと思います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;
}

お役に立てれば！:)

于 2012-06-07T12:08:15.880 に答える