I have a :hover effect applied --

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'm trying to add a checkbox that disables the hover effect if it's active, so I tried to do --

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

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

-- with this checkbox:

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

But it didn't work. I'm looking for a HTML/CSS solution to this. Anyone know why it's not working?

EDIT: What's wrong here? EDIT^2: Sibling selector. 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="">
      </div>
      <div class="col1">
        <img class="off" src="">
      </div>
    </td>
  </tr>
</table>

I have a :hover effect applied --

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'm trying to add a checkbox that disables the hover effect if it's active, so I tried to do --

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

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

-- with this checkbox:

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

But it didn't work. I'm looking for a HTML/CSS solution to this. Anyone know why it's not working?

EDIT: What's wrong here? EDIT^2: Sibling selector. 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>

• javascript
• jquery
• html
• css

• Can you create a fiddle? – Vucko Commented Oct 10, 2016 at 20:28
• input:checked + td:hover means that the checkbox would be the immediate preceding sibling of the td. That doesn't make sense structurally, so I'm guessing you don't actually have your HTML in that order. – andi Commented Oct 10, 2016 at 20:29
• the checkbox is in the header. Is there a way to make it make sense? – AlexG Commented Oct 10, 2016 at 20:32

1 Answer 1

Based on your posted code I assume the below markup.

The sibling selector + target a sibling and in below case it will be the table, not the 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>

If you want the checkbox to be in the header, you'll need to do a trick using a label, like this

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>

To clarify what will NOT work, below sample, as the actual checkbox is a child of the header and can't reach the img using the sibling selector.

For this to work a parent selector would be needed and those does not exist (yet)

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 after question edit

You need to use the ~ sibling selector, not the immediate sibling selector +, as the table does not e as an immediate sibling of the 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>