0

マウスオーバーすると色が変わるボタンのセットがあります。これらの CSS は次のように実行されます。

#navsite ul li button
{
    height: 60px;
    width: 60px;
    background-image: -moz-linear-gradient(bottom, black, #4D4D4D);
    box-shadow: 2px 3px 3px 2px #888888;
    border-radius: 15px;
    border-color: 359ABC;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: bottom;
}

#navsite ul li button:hover
{
    height: 60px;
    width: 60px;
    background-image: none;
    background-color: #00054C;
    box-shadow:  2px 3px 3px 2px #888888;
    border-radius: 15px;
    border-color: 359ABC;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: bottom;
}

次に、JavaScript はクリック時に色を変更します (以下の例は 5 つのボタンのうちの 1 つをカバーしており、各ボタンには関数があります。大量を許してください)。

function dude()
{
    document.getElementById("dude").hidden=false;
    document.getElementById("bob").hidden=true;
    document.getElementById("ted").hidden=true;
    document.getElementById("joe").hidden=true;
    document.getElementById("fred").hidden=true;
    document.getElementById("button1").style.background='#00054C';
    document.getElementById("button2").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button3").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button4").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
    document.getElementById("button5").style.background='-moz-linear-gradient(bottom, black, #4D4D4D)';
}

私の問題は、このスクリプトがアクティブ化された後、CSS ルール#navsite ul li button:hoverが適用されなくなり、マウスオーバー効果がまったくないことです。CSS の適切な実行を停止しないようにスクリプトを修正するにはどうすればよいですか?

編集: その CSS 句をスクリプト自体の一部に変換することを検討する必要がありますか? スクリプトを CSS 句に変換することは不可能であることがわかったので、リソースを最小限に抑えたいと考えています。

色自体をリストする代わりに、アクティブなクラスと非アクティブなクラスをリストするようにスクリプトを変更しました。ただし、それでもかなりかさばります。それを凝縮する方法についてのアイデアはありますか？

4

2 に答える 2

2

javascript を使用して要素にスタイリングを直接追加しないでください。代わりに、クラス .active を作成し、それをクリックした要素に追加します。次に、アクティブでなくなったらクラスを削除します。

.active{-moz-linear-gradient(bottom, black, #4D4D4D)}
于 2012-07-10T18:17:00.040 に答える
0

その CSS 句をスクリプト自体の一部に変換することを検討する必要がありますか?

いいえ、行動からプレゼンテーションを片付けます。

スクリプトを CSS 句に変換することは不可能であることがわかりました

いいえ。CSS でクラスを使用します。JavaScript で動的に変更できます。

button.active, button:hover {
    background: #00054C;
    /* forget about all the other properties, they are inherited!
    You know what the "C" in "CSS" stands for? */
}

JS:

document.getElementById("button1").className = "active";

ところで、IE でサポートされていないhiddenプロパティを使用してコンテンツを非表示にするべきではないと思います。代わりにインライン スタイルを使用します。

document.getElementById("dude").style.display = "none";
于 2012-07-10T18:25:25.987 に答える