将 css 应用于<img>里面<label>什么时候</label><label><img></label><label>被按下（移动）</label>

Question

想象一下，我有以下内容：

<label style="height:50px;width:50px">
    <img src="test.svg" width="30" height="30" style="cursor:pointer">
</label>

我的目标是使<img>在按下时（在移动设备上）进行视觉弹出。 流行，我的意思是快速淡入和淡出（例如通过应用降低的opacity ，然后恢复它）。

为了实现这一点，我在<label>中添加了一个 class 。 当 label 聚焦时，此 class 会影响opacity ，如下所示：

 .pop:focus img{ opacity: 0.5; }

 <label class="pop" style="height:50px;width:50px"> <img src="https://www.clipartkey.com/mpngs/m/100-1009872_png-file-svg-laughing-emoji-black-and-white.png" width="30" height="30" style="cursor:pointer"> </label>

不用说，这是行不通的。

我需要最简单的解决方案来解决这个问题。 具体来说，我更喜欢纯 CSS 解决方案（同样，根据 caniuse.com 使用受良好支持的 CSS 属性）。 在我看来，像这样的简单任务不需要 JS 或深奥的 CSS 属性。 当然，除非我错了，而且这个任务并不简单。

Answer 1

您可以使用复选框来触发 animation，如下所示：

HTML：

<label class="pop">
    <input type="checkbox" class="trigger">
    <img src="https://www.clipartkey.com/mpngs/m/100-1009872_png-file-svg-laughing-emoji-black-and-white.png" width="30" height="30" style="cursor:pointer">
</label>

CSS：

.pop {
  display: inline-flex; //to center img
  position: relative; //for the checkbox sizing
}

.pop > img {
  margin: auto; //center image in the label
  opacity: 1; //default opacity
}

.trigger {
  position: absolute; //make checkbox the same size as the label
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0; //hide the checkbox so it isn't visible
}

.trigger:checked ~ img {
  animation: pop 300ms; //add an animation property to the img sibling when the checkbox is clicked(checked)
}

// pop animation
@keyframes pop {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

JS小提琴

Answer 2

这很容易做到，如果你有一点 Javascript 和 CSS animation。 也许是这样的：

 document.getElementById("img").addEventListener("click", function() { this.style.animation = "fade 1s linear 1"; setTimeout(function() { document.getElementById("img").style.animation = ""; }, 1000) });

 @keyframes fade { 0% { opacity: 1 } 50% { opacity: 0; } 100% { opacity: 1; } } #img { background-color: red; border: 1px solid black; width: 100px; height: 100px; }

 <label id="label"> <div id = "img"></div> </label>

或者，如果你不想要 Js，你可以这样做：

 #img { width: 100px; height: 100px; background-color: red; transition: 1s; } #img:active { opacity: 0; }

 <label id="label"> <div id = "img"></div> </label>

Answer 3

如果将文本输入移动到 label 之前，则可以触发 animation 聚焦输入，当单击 label 时会发生这种情况。 然后可以再次显示 label 之后的输入，例如，使用带有行反转的 flex。

<div class="pop-label-image">
  <input type="text" id="example">
  <label for="example">
    <img src="https://via.placeholder.com/30">
  </label>
</div>

.pop-label-image {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: start;
}

@keyframes pop {
  0% {
    opacity: 1
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

.pop-label-image input:focus + label {
  animation: pop 500ms;
}