Javascript style overriding CSS hover - Stack Overflow

admin管理员组

文章数量:1391934

To make this clearer, I'll use my code below:

I have a divider container, "c_container":

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

Then I have CSS that controls it's style:

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

Then after I update the style using Javascript from an onClick function:

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

The CSS hover only effects the margin property and doesn't effect the left property as it did before. It's like javascript has locked it.

To make this clearer, I'll use my code below:

I have a divider container, "c_container":

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

Then I have CSS that controls it's style:

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

Then after I update the style using Javascript from an onClick function:

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

The CSS hover only effects the margin property and doesn't effect the left property as it did before. It's like javascript has locked it.

• javascript
• css
• onclick
• styles
• hover

Share Improve this question Follow edited Jun 9, 2012 at 21:42 Stefan Dunn asked Jun 9, 2012 at 21:31 Stefan DunnStefan Dunn 5,52377 gold badges5050 silver badges8686 bronze badges 7

• 1 Does your actual code also contain improper quoting? You need to use ' inside the onclick="..." string or use onclick='...' - basically you cannot use the same quote type inside which was used to quote the the attribute value. – ThiefMaster Commented Jun 9, 2012 at 21:33
• Sorry, yes it does. I'll edit – Stefan Dunn Commented Jun 9, 2012 at 21:35
• Curious...why are you forcefully hiding c_container if it will hide when the user moves the mouse off of it? – saluce Commented Jun 9, 2012 at 21:44
• I want the user to be able to click to hide it from within the c_main divider. It makes sense if you saw my web design :) – Stefan Dunn Commented Jun 9, 2012 at 21:47
• Maybe a link to a live server page? Will clear any questions (I think). – Hidde Commented Jun 9, 2012 at 21:55

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 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';
};

Sidenote: Using div as a name for an element is NOT a good idea and very confusing and misleading when reading your code.

Styles added with the JavaScript style are creating an inline style which has higher precedence than your style sheet. To fix this you can add !important to your style sheet:

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

Have problem with mas in onclick function ...

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

and 'div' is not good name for id.

Your CSS is confusing. For apply DIV tag

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

OR

#DIV_ID { ... } 

OR

.CLASSNAME { ...} 

EDIT

I'm recriate your example ... http://jsfiddle/PAg9M/1/ and work for me. What you need?

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.

本文标签： Javascript style overriding CSS hoverStack Overflow