Javascript style overriding CSS hover

Question

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.

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
– ThiefMaster, Commented Jun 9, 2012 at 21:33
Curious...why are you forcefully hiding c_container if it will hide when the user moves the mouse off of it? — saluce
– 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
– Stefan Dunn, Commented Jun 9, 2012 at 21:47
Maybe a link to a live server page? Will clear any questions (I think). — Hidde
– Hidde, Commented Jun 9, 2012 at 21:55

Hidde · Accepted Answer · 2012-06-09 21:41:11Z

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.

answered Jun 9, 2012 at 21:41

Hidde

12k8 gold badges46 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Lawrence · Accepted Answer · 2012-06-09 21:54:23Z

2

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

edited Jun 9, 2012 at 21:54

answered Jun 9, 2012 at 21:46

John Lawrence

2,92319 silver badges23 bronze badges

5 Comments

Stefan Dunn Over a year ago

The problem is that the left property gets overridden by javascript not margin-left. If i apply !important to the left property javascript does not effect its position

John Lawrence Over a year ago

Whoops, I added that to the wrong item, meant to add it to left not margin-left.

Stefan Dunn Over a year ago

I tried that and then javascript's style.left function doesn't change it's position.

John Lawrence Over a year ago

Yes, I just saw from your other comment that you are clicking from within the div, so I assume you are still 'hovering' when you want to hide it? In that case I don't think there's a lot you can do, either the js style will override the hover or the other way round. I could maybe suggest more if I could see the actual page.

Stefan Dunn Over a year ago

it was mainly for aesthetic pleasure, but it can be sacrificed. it's ok

Jones · Accepted Answer · 2012-06-09 22:40:38Z

1

Have problem with commas 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.net/PAg9M/1/ and work for me. What you need?

edited Jun 9, 2012 at 22:40

answered Jun 9, 2012 at 21:37

Jones

1,50019 silver badges35 bronze badges

Comments

NewUser · Accepted Answer · 2012-06-09 22:15:24Z

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.

answered Jun 9, 2012 at 22:15

NewUser

2872 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript style overriding CSS hover

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related