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

OR

#DIV_ID { ... }

OR

.CLASSNAME { ...}

修改

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

Answer 3

使用JavaScript样式添加的样式正在创建一个内联样式，其优先级高于样式表。要解决此问题，您可以在样式表中添加!important：

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

Answer 4

您遇到此问题，因为内联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>

这将解决您的问题。

Javascript样式覆盖CSS悬停

4 个答案: