主页 / 问题 / 613311
Accepted
VaskM
Asked:2020-01-11 17:46:14 +0000 UTC2020-01-11 17:46:14 +0000 UTC

（上下文）如何在单击 <div> 元素时将图像更改为另一个图像（仅限 css）？

  • 772

有一个代码（下）。单击时如何更改图像？

.feature-block {
  width: 270px;
  height: 320px;
  margin: 25px;
  background: #fff;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-block-img {
  display: block;
  margin: 35px auto 0;
  padding-top: 35px;
}
.feature-block-line {
  display: block;
  width: 70px;
  height: 2px;
  background: #EDEDED;
  margin: 20px auto 0;
}
.feature-block-title {
  text-align: center;
  font-family: "Roboto Regular";
  font-size: 16px;
}
.feature-block p {
  margin: 20px 10px 0;
  text-align: center;
  line-height: 22px;
  font-family: "Roboto Light";
  font-size: 12px;
}
#block-radio-1 {
  display: none;
}
input:checked + label .feature-block {
  color: #fff;
  background: #00B533;
}
<input type="radio" id="block-radio-1" name="block-select">
<label for="block-radio-1">
  <div class="feature-block">
    <div class="feature-block-header">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Simbolo_konoha.svg" class="feature-block-img" alt="">


      <div class="feature-block-line"></div>
      <p class="feature-block-title">Title</p>
      <p>Some text</p>
    </div>
  </div>
</label>

css

1 个回答

  1. Best Answer

    向页面添加两张图片，隐藏一张 - 显示另一张。单击时 - 显示第一个，隐藏第二个。

    .feature-block {
  width: 270px;
  height: 320px;
  margin: 25px;
  background: #fff;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-block-img {
  display: block;
  margin: 35px auto 0;
  padding-top: 35px;
}
.feature-block-line {
  display: block;
  width: 70px;
  height: 2px;
  background: #EDEDED;
  margin: 20px auto 0;
}
.feature-block-title {
  text-align: center;
  font-family: "Roboto Regular";
  font-size: 16px;
}
.feature-block p {
  margin: 20px 10px 0;
  text-align: center;
  line-height: 22px;
  font-family: "Roboto Light";
  font-size: 12px;
}
#block-radio-1 {
  display: none;
}
.checked-img {
display: none;
}
input:checked + label .feature-block {
  color: #fff;
  background: #00B533;
}

input:checked + label .checked-img{
display: block;
}

input:checked + label .unchecked-img{
display: none;
}
    <input type="radio" id="block-radio-1" name="block-select">
<label for="block-radio-1">
  <div class="feature-block">
    <div class="feature-block-header">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Simbolo_konoha.svg" class="feature-block-img unchecked-img" alt="">


<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/505px-Cat_silhouette.svg.png" class="feature-block-img checked-img">
      <div class="feature-block-line"></div>
      <p class="feature-block-title">Title</p>
      <p>Some text</p>
    </div>
  </div>
</label>

    • 2

相关问题