1

これを明確にするために、以下のコードを使用します。

仕切りコンテナ「c_container」があります。

<div id="c_container">
<div id="c_tab">Menu</div>
<div id="c_main">MenuContent</div>
</div>

次に、スタイルを制御する CSS があります。

#c_container {
    width: 550px;
    height: 265px;
    position: fixed;
    left: -550px;
    margin-left: 35px;
    top: 50%;
    margin-top: -100px;
}
#c_container:hover{
    margin-left: 0px;
    left: -40px;
}

次に、onClick 関数から Javascript を使用してスタイルを更新した後:

function hideForm(){
    var msg = document.getElementById("c_container");
    msg.style.left = "-550px";
}

CSS ホバーは margin プロパティにのみ影響し、以前のように left プロパティには影響しません。JavaScriptがロックされているようです。

4

4 に答える 4

3

jQuery:

//Normal: 
$('elementNameOrID').hover (function () {
    $(this).css('left', 0);
}, function () {
    $(this).animate('left', -500);
}); 

//Nice:
$('elementNameOrID').hover (function () {
    $(this).animate({left: 0});
}, function () {
    $(this).animate({left: -500});
});

JS:

onclick = function () {
    document.getElementById("div").style.left = '-550px';
};

サイドノート:要素の名前として使用divすることは良い考えではなく、コードを読むときに非常に混乱し、誤解を招く可能性があります。

于 2012-06-09T21:41:11.247 に答える
2

JavaScript スタイルで追加されたスタイルは、スタイル シートよりも優先度の高いインライン スタイルを作成しています。これを修正する!importantには、スタイル シートに次を追加します。

#c_container:hover{
    margin-left: 0px;
    left: -40px !important;
}
于 2012-06-09T21:46:10.207 に答える
1

onclick 関数のコンマに問題があります ...

onclick="document.getElementById('div').style.left='-550px;'"

「div」は id の名前として適切ではありません。

あなたのCSSは紛らわしいです。DIVタグ適用用

div {
   position: fixed;
   left: -550px;
}
div:hover{
   left: 0px;
}

また

#DIV_ID { ... }

また

.CLASSNAME { ...}

編集

私はあなたの例を称賛しています... http://jsfiddle.net/PAg9M/1/そして私のために働きます。何が必要？

于 2012-06-09T21:37:16.010 に答える
0

この問題に直面しているのは、インライン css が「style」タグ内のものよりも優先され、javascript がインライン css を追加するためです。

したがって、これを行うにはjavascriptのみを使用する必要があります-

あなたのhtmlを変更してください-

<div id="c_container" onmouseover="style.left='0'" onmouseout="style.left='-550'">
<div id="c_tab">Menu</div>
<div id="c_main">MenuContent</div>
</div>

これで問題が解決します。

于 2012-06-09T22:15:24.173 に答える