Setting [CSS]: freeze and: checked

Question

I have an effect: hover -

td img.off{
    display:none;
}

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

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

- on some images.

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

I am trying to add a checkbox that disables the hover effect if it is active, so I tried to do -

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

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

- with this flag:

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

But that did not work. I am looking for an HTML / CSS solution for this. Does anyone know why it is not working?

EDIT: What's wrong here? EDIT ^ 2: selector. It can’t even.

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>

Run codeHide result

Answer 1

Based on your published code, I assume the following markup.

The sibling selector +is for the sibling, and in the lower case it will be table, nottd

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>

Run codeHide result

, , , ,

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>

Hide result

, , , checkbox header img sibling.

, ()

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>

Hide result

~, +, 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>

Hide result