將鼠標懸停在圖像上產生頂部的另一個圖像，而不會影響下面使用背景圖片

Question

像我希望當用戶將鼠標懸停在某本書的圖像（見下文），其中一個效果，勾號會彈出，以表明它會點擊後選中。最終，我希望一個人能夠按Alt（cmd on mac）來選擇多本書。

下面是HTML：

<div class="container"> 
    <div class="wrapper"> 
     <div class="upload_div"> 
      <div class="upld_div1"> 
       <ul> 
        <li> 
         <div class="book_div"></div> 
         <div class="book_shdw"></div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

這是當前CSS：

.book_div { 
    background-image:url(../img/book_img.png); 
    background-size: 67.9px 105px; 
    border:1px solid #bfc1c4; 
    width:67.9px; 
    height:105px; 
    text-align:center; 
    margin: auto; 
} 

.book_div:hover{ 
    cursor:pointer; 
    background-image: url(../img/book_img.png), 
         url(../img/check.png); 
    background-position: relative; 
} 

我不能爲我的生活弄清楚如何獲得另一個圖像去其他頂級懸停時。在SO和其他論壇上有很多關於如何讓HTML與CSS背景圖像結合以及如何將一個圖像轉換爲另一個圖像的解釋，但是關於如何將一個圖像轉換爲另一個圖像的解釋並不多。另請注意，check.png應放置在右上角，以便它位於div的外部。請提供任何見解！謝謝。

編輯： 感謝您的及時答覆Mathias，這是一個小錯字。我在.book_div：hover css中實現了多個bg圖像，但仍然無法使用。當我這樣做時，光標在懸停時會發生變化，但第二張圖像根本不會彈出。 （我現在編輯了語法並將編輯這些筆記）

Answer 1

當您聲明多個背景圖像時，您應該首先放置頂部圖像。

我覺得這篇文章偉大的解釋背景圖像的層疊順序：http://css-tricks.com/stacking-order-of-multiple-backgrounds/

希望這有助於！

DEMO

.book_div:hover{ 
    cursor:pointer; 
    background-image: url(./top_image.png), url(./bottom_image.svg); 
}