Установка а [CSS]: парить и: проверено состояние

Question

У меня есть: парить эффект применяется -

td img.off{ 
    display:none; 
} 

td:hover img.off{ 
    display:inline; 
} 

td:hover img.on{ 
    display:none; 
} 

- на некоторых изображениях.

<td> 
    <div class="col1"><img class="on" src="1.bmp"></div> 
    <div class="col1"><img class="off" src="2.bmp"></div> 
</td> 

Я пытаюсь добавить флажок, который отключает эффект парения, если он активен, так что я пытался сделать -

input:checked + td:hover img.off{ 
    display:inline; 
} 

input:checked + td:hover img.on{ 
    display:none; 
} 

- с этим флажком:

<input type="checkbox" name="box" class="cbox"> 

Но это не сработало. Я ищу для этого решение HTML/CSS. Кто-нибудь знает, почему он не работает?

EDIT: Что здесь не так? EDIT^2: селектор. Даже не может.

input { 
 
    display: none; 
 
} 
 
label[for="chkbox1"] { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
input:checked + .header label:after { 
 
    content: 'X'; 
 
} 
 
table td img.off{ 
 
    display:none; 
 
} 
 
input:checked + table td:hover img.off{ 
 
    display:inline; 
 
} 
 
input:checked + table td:hover img.on{ 
 
    display:none; 
 
}

<input id="chkbox1" type="checkbox" name="box" class="cbox"> 
 

 
<div class="header"> 
 
    <label for="chkbox1"></label> 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="col1"> 
 
     <img class="on" src="http://placehold.it/50"> 
 
     </div> 
 
     <div class="col1"> 
 
     <img class="off" src="http://placehold.it/100"> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

Основываясь на вашем публикуемую кода я предполагаю ниже разметку.

Селектор родственный + цель родной брат и ниже случае это будет table, не td

input:checked + table td:hover img.on { 
 
    border: 2px solid red; 
 
}

<input type="checkbox" name="box" class="cbox"> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="col1"> 
 
     <img class="on" src="http://placehold.it/50"> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Если вы хотите эту опцию, чтобы быть в заголовке, вы» Вам необходимо сделать трюк, используя этикетку, например,

input { 
 
    display: none; 
 
} 
 
label[for="chkbox1"] { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
input:checked ~ table td:hover img.on { 
 
    border: 2px solid red; 
 
} 
 
input:checked + .header label:after { 
 
    content: 'X'; 
 
}

<input id="chkbox1" type="checkbox" name="box" class="cbox"> 
 

 
<div class="header"> 
 
    <label for="chkbox1"></label> 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="col1"> 
 
     <img class="on" src="http://placehold.it/50"> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Чтобы выяснить, что не будет работать, ниже образец, так как фактическая checkbox является дочерним header и не может достичь img с помощью селектора родственного.

Для этой работы родительский селектор будет необходимо, и тех, кто не существует (пока)

input:checked ~ table td:hover img.on { 
 
    border: 2px solid red; 
 
}

<div class="header"> 
 
    <input id="chkbox1" type="checkbox" name="box" class="cbox"> 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="col1"> 
 
     <img class="on" src="http://placehold.it/50"> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Update после вопроса редактирования

Вы должны использовать ~ родственный селектор, а не непосредственный селектор братьев и сестер +, так как table не является непосредственным родственником input

input { 
 
    display: none; 
 
} 
 
label[for="chkbox1"] { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
input:checked + .header label:after { 
 
    content: 'X'; 
 
} 
 
table td img.off { 
 
    display:none; 
 
} 
 
input:checked ~ table td:hover img.off { 
 
    display:inline; 
 
} 
 
input:checked ~ table td:hover img.on { 
 
    display:none; 
 
}

<input id="chkbox1" type="checkbox" name="box" class="cbox"> 
 

 
<div class="header"> 
 
    <label for="chkbox1"></label> 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="col1"> 
 
     <img class="on" src="http://placehold.it/50/0f0"> 
 
     </div> 
 
     <div class="col1"> 
 
     <img class="off" src="http://placehold.it/100/0ff"> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>