2016-04-05 18 views
0

Der Code:Wie css eines div hinzufügen, wenn das Kontrollkästchen aktiviert ist?

#menu-open:checked ~ .logoib { 
 
    -webkit-filter: invert(100%); 
 
    filter: invert(100%); 
 
}
<div id="logo" class="logoib"></div> 
 

 
<input type="checkbox" id="menu-open"> 
 

 
<nav class="menu-list"> 
 
    <a href="#" class="firsta">Home</a> 
 
    <a href="#">My Works</a> 
 
    <a href="#">Contact</a> 
 
</nav> 
 

 
<label for="menu-open" class="modmenu logoib"> 
 
    <span></span> 
 
</label>

Ich möchte einige CSS von #logo hinzuzufügen, wenn das Kontrollkästchen des Menüs aktiviert ist.

+0

In diesem Zusammenhang nicht möglich. Sie müssen sich entweder mit JavaScript begnügen oder die Eingabe früher in das DOM (vor dem '# logo' Element) einfügen. –

+0

ja, ich dachte ... ich werde das machen .. danke trotzdem! –

Antwort

0

Sie reine JS, JQuery oder CSS benutzen konnten.

Hier ist eine reine JS-Lösung. Wenn Sie es auch beim Laden einrichten möchten, können Sie myFunction aufrufen, wenn das DOM bereit ist.

function myFunction() { 
 
    var cb = document.getElementById('menu-open'); 
 
    var logo = document.getElementById('logo'); 
 

 
    if (cb.checked) { 
 
    logo.setAttribute("class", "newClass"); 
 
    } else { 
 
    logo.removeAttribute("class"); 
 
    } 
 
}
#menu-open:checked~.logoib { 
 
    -webkit-filter: invert(100%); 
 
    filter: invert(100%); 
 
} 
 
.newClass { 
 
    color: red; 
 
}
<div id="logo" class="logoib">Logo 
 

 
</div> 
 
<input type="checkbox" id="menu-open" onchange="myFunction()"> 
 

 
<nav class="menu-list"> 
 
    <a href="#" class="firsta">Home</a> 
 
    <a href="#">My Works</a> 
 
    <a href="#">Contact</a> 
 
</nav> 
 

 
<label for="menu-open" class="modmenu logoib"> 
 
    <span></span> 
 
</label>

+0

Vielen Dank LuLylulu, es funktioniert FANTASTISCH: d danke Ihnen allen –

+0

froh, ich könnte helfen :) – Lulylulu

1

CSS kann nicht alles beeinflussen, bevor sie es nur wie Sachen nach dem gezielten Elementwechsel beeinflussen können unter

#menu-open + #logo { 
 
    color: #ccc; 
 
    font-style: italic; 
 
} 
 
#menu-open:checked + #logo { 
 
    color: #f00; 
 
    font-style: normal; 
 
}
<input type="checkbox" id="menu-open"> 
 
<div id="logo" class="logoib"> 
 
    my logo here 
 
</div> 
 

 
<nav class="menu-list"> 
 
    <a href="#" class="firsta">Home</a> 
 
    <a href="#">My Works</a> 
 
    <a href="#">Contact</a> 
 
</nav> 
 

 
<label for="menu-open" class="modmenu logoib"> 
 
    <span></span> 
 
</label>

+0

Ich habe versucht, den Eingabecode nach oben zu bewegen, es funktioniert, aber dann css Menüliste nicht –

Verwandte Themen