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;
}

然后在我使用 Javascript 从 onClick 函数更新样式后：

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 { ...}

编辑

我recriate你的例子...... http://jsfiddle.net/PAg9M/1/并为我工作。你需要什么？

于 2012-06-09T21:37:16.010 回答
0

You are facing this problem because inline css haves more priority than the one in"style" tag and javascript add inline css.

So should use only javascript to do this-

modify your 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>

This will sort out your problem.

于 2012-06-09T22:15:24.173 回答