Javascript樣式覆蓋CSS懸停

Question

為了使這一點更清楚，我將在下面使用我的代碼：

我有一個分隔容器“ 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已將其鎖定。

Answer 1

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作為元素的名稱不是一個好主意，並且在閱讀代碼時會造成混亂和誤導。

Answer 2

在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/並為我工作。 你需要什么？

Answer 3

用JavaScript樣式添加的樣式正在創建內聯樣式，該樣式的優先級高於樣式表。 要解決此問題，您可以在樣式表中添加!important ：

#c_container:hover{
    margin-left: 0px;
    left: -40px !important;
}

Answer 4

您正面臨此問題，因為內聯CSS比“樣式”標記中的優先級更高，並且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>

這樣可以解決您的問題。