Changement div couleur avec css vérifié sélecteur

J'ai un problème lorsque je tente de changer la couleur d'une div à l'aide de balises input. Si la div est dans la même section des entrées, il fonctionne parfaitement. Mais si j'essaie de mettre la div dans le pied de page, par exemple, arrêter de travailler.

HTML:

 <section>
    <input id="select1" name="test" type="radio" checked />
        <label for="select1">Red</label>
    <input id="select2" name="test" type="radio" />
        <label for="select2">Green</label>
    <input id="select3" name="test" type="radio" />
        <label for="select3">Blue</label>
</section>
<footer>
    <div class="colorDiv"></div>
</footer>

CSS:

.colorDiv{
    width:50px;
    height:50px;
    background-color:red;
}

#select2:checked ~ .colorDiv{
    background-color:green;
}

#select3:checked ~ .colorDiv{
    background-color:blue;
}

Voici un exemple: http://jsfiddle.net/cqscc48g

Il n'y a aucun moyen de le réaliser?

Grâce

InformationsquelleAutor Devilquest | 2014-09-16
  1. 4

    Css est un en cascade moteur de rendu. Il s'ensuit donc le DOM de l'élément de structure. Par conséquent, vous ne peut concerner que des éléments qui sont des descendants ou, au moins, suivant les frères et sœurs.

    Vous avez deux options:

    1 - Réglez votre code HTML:

    Vous n'avez même pas besoin de mettre la div à l'intérieur de l'entrée de la section. Mais au moins, vous auriez à laisser les entrées de la section, pour faire un "neveu" de sélecteur. (bien sûr, cette dénomination n'existe pas 😉 )

    JsFiddle - Changin HTML

    <input id="select1" name="test" type="radio" checked />
    <label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
    <label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
    <label for="select3">Blue</label>

<footer>
    <div class="colorDiv"></div>
</footer>

    Et puis vous pouvez sélectionner:

    #select2:checked ~ footer .colorDiv{
    background-color:green;
}

#select3:checked ~ footer .colorDiv{
    background-color:blue;
}

    2 - Utiliser un Javascript approche:

    Si vous aimez votre structure HTML tellement, alors vous devez aller Javascript. Vous pouvez en faire un beaucoup plus précis, mais juste un exemple:

    JsFiddle - à l'Aide de Javascript

    function ChangeColor(color) {
    var clrDiv = document.getElementsByClassName("colorDiv")[0];
    clrDiv.style.backgroundColor = color;
}

document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }
    InformationsquelleAutor LcSalazar
  2. 1

    Changer votre balisage et de passer par les commentaires dans le code,

    <section>
    <input id="select1" name="test" type="radio" checked />
    <label for="select1">Red</label>
    <input id="select2" name="test" type="radio" />
    <label for="select2">Green</label>
    <input id="select3" name="test" type="radio" />
    <label for="select3">Blue</label>
    <div class="colorDiv"></div> <!-- this should be adjacent as per your css selectors -->
</section>

    Violon

    • Oui, je sais que cela fonctionne. Mais j'ai besoin de la div pour être dans le pied de page et les entrées dans la section. Je ne sais pas si c'est possible avec uniquement du css.
    InformationsquelleAutor Dipak Ingole
  3. -1

    Si vous voulez cliquez à l'intérieur de quelque part div et passez tout de corps div que d'entrée sur le dessus à l'extérieur.

    <style>
input[type=checkbox] {
  display:none;
}
input[type=checkbox]:checked ~ div.content{
  display:none;
}
</style>

<input type="checkbox" id="toogle-content"/>
<div>
     <label for="toogle-content" id="toogle-content">CLICK ME!</label>
</div>
<div class="content">
     I can toggle now ;)
</div>
    InformationsquelleAutor emdy
  4. -2

    Utilisation .change() pour chaque input. Sur le changement de vérifier id de cliqué sur entrée, puis changer la couleur de la div

    • jQuery (ou javascript) n'est pas balisé, donc je suppose que le TS est à la recherche d'un CSS solution. À cet effet, ce n'est pas une réponse, vous feriez mieux d'ajouter un commentaire.
    InformationsquelleAutor danielg44k