css - 单击图像时保留覆盖的 FigCaption

Question

当前: 我有 10 张带有 figcaption 的单独图像，它们用作复选框。当用户在图像上滚动鼠标时，图像上会显示 figcaption。一旦用户选择图像并移出鼠标，图形说明就会消失。

问题和预期结果:我正在努力实现，一旦用户选择图像，无形标题应该保留而不是消失(仅针对所选图像)。不确定我哪里出错了。

/* for image as a checkbox. */

input.img-checkbox[type=radio],
input.img-checkbox[type=checkbox] {
  display: none;
}
figure img {
  max-width: 100px;
  width: 100px;
  height: 120px;
}
input.img-checkbox[type=radio]+label,
input.img-checkbox[type=checkbox]+label {
  border: 3px solid transparent;
  display: inline-block;
  border-radius: 3px;
}
input.img-checkbox[type=radio]:checked+label,
input.img-checkbox[type=checkbox]:checked+label {
  border: 3px solid green;
  display: inline-block;
}
/* until here */

/* to display the figure caption on mouse over */

figure {
  display: block;
  position: relative;
  overflow: hidden;
}
figcaption {
  position: absolute;
  padding: 5px;
  background: rgba(0, 0, 0, 0.4);
  color: #FFF;
  font-size: 14px;
  max-width: 100px;
  width: 100px;
  opacity: 0;
  bottom: 0;
  top: 0;
  left: -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
  left: 0;
}

.cap-bot figcaption {
  left: 0;
  bottom: -30%;
}
.cap-bot:hover figcaption {
  bottom: 0;
}
/* until here */

<form>
  <div>
    <input id='1' class="img-checkbox" type="checkbox" name="selectTipo" value='10073' />
    <figure class='cap-bot'>
      <label for='1' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='1' class='FakeClass'>Amirul Azri Bin Ishak</label>
      </figcaption>
    </figure>
    <input id='2' class="img-checkbox" type="checkbox" name="selectTipo" value='3688' />
    <figure class='cap-bot'>
      <label for='2' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='2' class='FakeClass'>Bacon Anak Kendu</label>
      </figcaption>
    </figure>
    <input id='3' class="img-checkbox" type="checkbox" name="selectTipo" value='9492' />
    <figure class='cap-bot'>
      <label for='3' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='3' class='FakeClass'>Fadhlur Rahman</label>
      </figcaption>
    </figure>
    <input id='4' class="img-checkbox" type="checkbox" name="selectTipo" value='6912' />
    <figure class='cap-bot'>
      <label for='4' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='4' class='FakeClass'>Faridah Bte Abdul Aziz</label>
      </figcaption>
    </figure>
    <input id='5' class="img-checkbox" type="checkbox" name="selectTipo" value='10135' />
    <figure class='cap-bot'>
      <label for='5' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='5' class='FakeClass'>Hisham Bin Kamal Mustafa</label>
      </figcaption>
    </figure>
    <input id='6' class="img-checkbox" type="checkbox" name="selectTipo" value='3705' />
    <figure class='cap-bot'>
      <label for='6' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='6' class='FakeClass'>Hong Wai Heng</label>
      </figcaption>
    </figure>
    <input id='7' class="img-checkbox" type="checkbox" name="selectTipo" value='9377' />
    <figure class='cap-bot'>
      <label for='7' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='7' class='FakeClass'>Jufri Bin Othman</label>
      </figcaption>
    </figure>
    <input id='8' class="img-checkbox" type="checkbox" name="selectTipo" value='3698' />
    <figure class='cap-bot'>
      <label for='8' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='8' class='FakeClass'>Kendy Albert Kiim</label>
      </figcaption>
    </figure>
    <input id='9' class="img-checkbox" type="checkbox" name="selectTipo" value='10049' />
    <figure class='cap-bot'>
      <label for='9' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='9' class='FakeClass'>Kesava Kumar Krishnan</label>
      </figcaption>
    </figure>
    <input id='10' class="img-checkbox" type="checkbox" name="selectTipo" value='10074' />
    <figure class='cap-bot'>
      <label for='10' class='FakeClass'>
        <img src='images/employees/noimage.jpg' style="border:1px solid;" />
      </label>
      <figcaption>
        <label for='10' class='FakeClass'>Khairil Hazrin Bin Kasbolah</label>
      </figcaption>
    </figure>
  </div>
</form>

感谢帮助。

Answer 1

您可以尝试利用复选框。我认为您实际上可能已经设置了完美的解决方案，只是不知道而已。从您的代码来看，我们需要从输入中找到一条到 figcaption 的路径。看起来这可行:

.img-checkbox:checked + figure figcaption {
  opacity:1;
}

这将选择与选中输入直接相邻的图形的 figcaptions，并使其不透明度为 1。