Javascript样式覆盖CSS悬停

为了更清楚，我将使用下面的代码：

我有一个分隔器容器，“c_容器”：

然后，在使用onClick函数中的Javascript更新样式之后：

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

---

CSS悬停只影响margin属性，不会像以前那样影响left属性。就像javascript锁定了它。

onclick函数中的逗号有问题

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

“div”不是id的好名字

你的CSS令人困惑。用于应用DIV标记

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

或

或

编辑

---

我在重复你的例子。。。为我工作。您需要什么？

onclick函数中的逗号有问题

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

“div”不是id的好名字

你的CSS令人困惑。用于应用DIV标记

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

或

或

编辑

我在重复你的例子。。。为我工作。您需要什么？

jQuery:

JS:

旁注：使用

div

作为元素的名称不是一个好主意，在阅读代码时非常容易混淆和误导。

jQuery:

JS:

---

旁注：使用

div

作为元素的名称不是一个好主意，在阅读代码时会产生混淆和误导。

使用JavaScript样式添加的样式会创建一个比样式表优先级更高的内联样式。要解决此问题，您可以添加

！重要信息

到您的样式表：

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

---

使用JavaScript样式添加的样式创建的内联样式的优先级高于样式表。要解决此问题，您可以添加

！重要信息

到您的样式表：

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

---

您正面临这个问题，因为内联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>

菜单
菜单内容

---

这将解决您的问题。

您正面临这个问题，因为内联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>

菜单
菜单内容

---

---

这将解决您的问题。

您的实际代码是否也包含不正确的引用？您需要在

onclick=“…”

字符串中使用

”

，或者使用

onclick='''.'

-基本上，您不能在属性值中使用相同的引号类型。抱歉，是的。我很好奇…如果用户将鼠标移离c_容器时它会隐藏，为什么要强制隐藏它？我希望用户能够单击以隐藏它，使其不在c_主分隔符中。如果你看到我的网页设计，这是有意义的：）也许是一个指向实时服务器页面的链接？将清除任何问题（我认为）。您的实际代码是否也包含不正确的引用？您需要在

onclick=“…”

字符串中使用

”

，或者使用

onclick='''.'

-基本上，您不能在属性值中使用相同的引号类型。抱歉，是的。我很好奇…如果用户将鼠标移离c_容器时它会隐藏，为什么要强制隐藏它？我希望用户能够单击以隐藏它，使其不在c_主分隔符中。如果你看到我的网页设计，这是有意义的：）也许是一个指向实时服务器页面的链接？将清除所有问题（我认为）。问题是left属性被javascript覆盖，而不是左边距。如果我申请的话！对left属性很重要javascript不会影响其位置哎哟，我将其添加到了错误的项中，旨在将其添加到

left

而不是

margin left

。我尝试了一下，然后javascript的style.left函数没有改变它的位置。是的，我刚刚从您的其他注释中看到您正在从div中单击，所以我假设你想隐藏它的时候还在“徘徊”呢？在这种情况下，我认为没有什么可以做的，要么js样式将覆盖悬停，要么相反。如果我能看到真实的页面，我可能会提出更多的建议。这主要是为了审美享受，但也可以牺牲。问题是left属性被javascript覆盖，而不是被marginleft覆盖。如果我申请的话！对left属性很重要javascript不会影响其位置哎哟，我将其添加到了错误的项中，旨在将其添加到

left

而不是

margin left

。我尝试了一下，然后javascript的style.left函数没有改变它的位置。是的，我刚刚从您的其他注释中看到您正在从div中单击，所以我假设你想隐藏它的时候还在“徘徊”呢？在这种情况下，我认为没有什么可以做的，要么js样式将覆盖悬停，要么相反。如果我能看到真实的页面，我可能会提出更多的建议。这主要是为了审美享受，但也可以牺牲。没关系

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

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