1

問題が発生しました:/ホバー時に背景の位置を変更する CSS を取得しました。しかし、ホバーを変更する JavaScript で関数を実行すると、CSS が機能しなくなります。

これは機能です：

function tree() {
var boxfb = document.getElementById('fb_box');
var boxtw = document.getElementById('twitter_box');
var boxsun = document.getElementById('sun_box');
var boxtree = document.getElementById('tree_box');
var btn = document.getElementById('hbtr');
if(boxtree.style.visibility == "hidden") {
    boxtw.style.visibility="hidden";
    boxfb.style.visibility="hidden";
    boxsun.style.visibility="hidden";
    boxtree.style.visibility="visible";
    btn.style.backgroundPosition="-150px -100px";
}
else {
    boxtree.style.visibility="hidden";
    btn.style.backgroundPosition="-150px 0";
}

}

Live at http://enji.se (左上隅の木を押す)

4

1 に答える 1

4

要素に「style」属性を追加しているため、この「style」属性内のすべてが、事前定義されたCSS設定のいずれかをオーバーライドします（優先されます）。この場合、「btn.style.backgroundPosition = "-150px0";」「-150px-100px」のホバースタイルを要素に直接追加することでオーバーライドします。

あなたがここで何をしようとしているのか正確にはわかりません、そしておそらくあなたがしていることを行うためのより単純な方法があります-しかしそれはあなたがここにいる理由ではないと思います...

だからあなたの問題を解決するために私は2つのことのいずれかを提案します：
    1）スタイル属性の代わりにjavascriptを使用してクラスを追加/削除します
-または、簡単な修正として
    -2）スタイルシートの行343に「！important」を追加します。

.tree:hover {
    background-position: -150px -100px !important;
}
于 2011-05-14T23:35:54.393 に答える