Comment modifier les propriétés CSS des éléments en fonction des propriétés CSS d'autres éléments? Par exemple; Je veux changer la position par défaut de "bigbutton" si la couleur de "div1" est noire. C'est ce que j'ai essayé:
html p> css p> jQuery p> $(document).ready(function(){ $('.div1').mouseenter(function(){ $(this).css('background','black'); }); $('.div1').mouseleave(function(){ $(this).css('background',''); }); $('.div2').mouseenter(function(){ $('.div1').css('background','yellow'); }); $('.div2').mouseleave(function(){ $('.div1').css('background',''); }); $('.div3').mouseenter(function(){ $('.div1').css('background','black'); }); $('.div3').mouseleave(function(){ $('.div1').css('background',''); }); if($('.div').css('background') == 'black'){ $('.bigbutton').css('left','200px'); } else{ $('.bigbutton').css('left','100px'); } });
3 Réponses :
Lorsque vous dites "Changer x selon Y", vous décrivez fondamentalement un Pour obtenir le résultat souhaité pour toute entrée qui modifierait la couleur de Div1, vous pouvez utiliser Observateur de mutation , fonctionne comme un événement d'événement pour DOM modifications: HTTPS: // CodesPen .io / stylo / pvmvzw si conditionnel.
Compte tenu de votre exemple, vous pouvez également obtenir le résultat souhaité en modifiant la position du bouton dans le même bloc de code où la Div1 devient noire: https://codepen.io/pen/rvxqmp
Mon erreur, j'aurais dû être plus précis. La postion de Bigbutton ne devrait pas changer sur la souriseuse de Div1, mais uniquement lorsque la couleur est noire. Parce que si nous ajoutons plus d'elèmes qui changent la couleur de Div1 en noir, le gros bouton doit changer de position.J'ai édité le code pour mieux expliquer le scénario.
Réponse mise à jour avec une solution pour chaque changement qui rend Div1 a des antécédents noirs, espérons qu'il aide.
C'est ce que je voulais exactement. Merci.
Tout d'abord, vous devez obtenir la couleur du puis faites votre chèque bigbutton
Vous pouvez l'essayer, code HTML:
container.onmouseover = container.onmouseout = handler;
function handler(event){
if (event.type == 'mouseover') {
if(event.target.className=='div1'){
event.target.style.background = 'black';
moveLeft();
}
if(event.target.className=='div2'){
document.getElementsByClassName('div1')[0].style.background = 'yellow';
}
if(event.target.className=='div3'){
document.getElementsByClassName('div1')[0].style.background = 'black';
moveLeft();
}
}
if (event.type == 'mouseout') {
if(event.target.className=='div1'){
event.target.style.background = '';
}
if(event.target.className=='div2'){
document.getElementsByClassName('div1')[0].style.background = '';
}
if(event.target.className=='div3'){
document.getElementsByClassName('div1')[0].style.background = '';
}
moveRight();
}
}
function moveLeft(){
$('.bigbutton').css('left','200px');
}
function moveRight(){
$('.bigbutton').css('left','100px');
}
Bonjour, merci d'avoir pris le temps de répondre. Cette méthode fonctionne très bien, mais c'est un peu différent de ce que je voulais.
Pourquoi ne mettez-vous pas ces autres propriétés CSS à l'intérieur des gestionnaires d'événements de la souris? Notez que la mise bas de la mise en place d'un CLSS peut également rendre cela plus simple et utiliser des règles CSS en fonction de la classe.