在图像上添加一个带轮廓的心形图标以象征收藏夹，单击和悬停时该图标将被填充

Question

我有一个图像列表，用户可以单击并将它们作为自己的收藏夹。

如何向图像添加额外的图层，使其在角落有一个轮廓的心形图标，悬停时，会用轮廓颜色填充，单击时会保持填充，因为它现在是收藏夹？

Answer 1

如果您想为图像添加额外的"图层"，请使用包装器/容器并定位它。

例如

<div class="img-wrapper"><img src=""></div>

有了这个，你可以利用 ：before 和 ：after 元素

.img-wrapper {
  position: relative;
}
.img-wrapper:before {
  display: block;
  content: ""; /* you can have a font here for your icons */
  background-image: url(); /* or you could use a background image */
  position: absolute;
  width: icon height;
  height: icon height;
  top: XX;
  left: XX; /* or right */
  z-index: 1000; /* make sure it sits above your image */
}

要更改图标，请在包装器上使用 ：hover 并在用户单击 img 时使用 JS 添加类

.img-wrapper:hover:before {
  content: "" /* change icon or */
  background: url"" /* image */
}
/* If user clicks on image, add active class that changes the icon to the liked version */
.img-wrapper.active {
  content: "" /* change icon or */
  background: url"" /* image */
}

使用 jQuery： https://api.jquery.com/addclass/添加一个类