vol stationnaire CSS remplaçant style Javascript

Question

Pour rendre cela plus clair, je vais utiliser mon code ci-dessous:

J'ai un récipient diviseur, "c_container":

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

Ensuite, je CSS qui contrôle son 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; 
} 

Puis, après mettre à jour le style en utilisant Javascript d'une fonction onClick:

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

Le survol CSS affecte uniquement la propriété margin et n'affecte pas la propriété left comme auparavant. C'est comme si javascript l'avait verrouillé.

Answer 1

rencontrerez des problèmes avec des virgules dans la fonction onclick ...

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

et 'div' est pas bon nom pour id.

Votre CSS porte à confusion. Pour appliquer balise DIV

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

OU

#DIV_ID { ... } 

OU

.CLASSNAME { ...} 

EDIT

Je suis recriate votre exemple ... http://jsfiddle.net/PAg9M/1/ et le travail pour moi. De quoi as-tu besoin?

Answer 2

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: En utilisant div comme un nom pour un élément n'est pas une bonne idée et très déroutant et trompeur en lisant votre code.

Answer 3

Les styles ajoutés au style JavaScript créent un style en ligne dont la priorité est supérieure à celle de votre feuille de style. Pour corriger cela, vous pouvez ajouter !important à votre feuille de style:

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

Answer 4

Vous êtes face à ce problème, car en ligne css plus grande priorité que nantis d'une dans la balise « style » et javascript ajouter css en ligne.

Alors que javascript devrait utiliser pour faire this-

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

Cela va régler votre problème.