添加一個概述的心臟圖標來表示一個圖片上的最喜歡的點擊和懸停時獲得的最喜歡的圖片

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 */ 
} 

要更改圖標，使用方法：將鼠標懸停在包裝和使用JS來當用戶點擊添加一個類IMG

.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/