html - 在图像上添加轮廓心形图标以表示收藏夹，单击并悬停时该图标会被填充

Question

我有一个图片列表，用户可以点击并收藏它们。

我如何向图像添加一个额外的层，使其在 Angular 落有一个心形图标轮廓，当鼠标悬停时，会填充轮廓颜色，当点击时保持填充状态，因为它现在是最喜欢的？

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/