javascript - Rails - 单选按钮根据选中、悬停和焦点更改图像

Question

我有一个带有图像和复选框的标签。我想根据悬停进/出和复选框状态更改图像。

我有几个单选按钮，每个按钮有两个图像:“图像事件”和“图像非事件”。

我想在选中按钮或悬停标签时显示“事件”图像，并在未选中按钮且未悬停标签时显示非事件图像。我认为最好的方法是将图像源作为数据属性传递并使用一些 JS，但我不太确定，而且我想出的代码似乎相当复杂。

<label>
  <img data-active-image="xxx", data-inactive-image="...">
  <input type="radio">
</label>

代码是从 Rails 应用程序生成的，但我认为这在这里并不重要。唯一要记住的是，数据事件图像内容是动态的并由后端处理，所以我真的不想使用 CSS 样式/背景技巧。

Answer 1

使用 CSS 可能比使用 JS 容易得多。

<label>
  <input type="radio">
  <img class="active" src="active_img_src">
  <img class="inactive" src="inactive_img_src">
</label>

label input:checked ~ img.inactive,
label:hover input:not(:checked) ~ img.inactive {
  display:none;
}

label input:not(:checked) ~ img.active,
label:hover input:checked ~ img.active {
  display:none;
}

label:hover input:checked ~ img.inactive,
label:hover input:not(:checked) ~ img.active {
  display: block;
}