javascript - 设置 [CSS] :hover and :checked condition

Question

我应用了 :hover 效果 --

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 解决方案。有人知道为什么它不起作用吗？

编辑:这里有什么问题？编辑^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>

问题编辑后更新

您需要使用 ~ 兄弟选择器，而不是直接兄弟选择器 +，因为 table 不是直接兄弟输入

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>