如何在複選框選中時添加div的css？

Question

驗證碼：

#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>

我想補充的#logo一些CSS菜單時的複選框被選中。

Answer 1

你可以使用純JS，JQuery的或CSS目標元素變化後影響的東西。

這是一個純粹的JS解決方案。如果您想在加載時設置它，則可在DOM準備就緒時調用myFunction。

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>

Answer 2

CSS不能影響任何東西之前，它只能像下面

#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>