将鼠标悬停在图像上可在顶部生成另一个图像，而不会影响下面使用背景图像的图像

Question

我想要一种效果，当用户将鼠标悬停在某个书本图像上时（见下文），会弹出一个复选标记框，表示点击后会选中它。最后，我希望一个人能够按下alt（Mac上的cmd）来选择多本书。

这是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中实现了多个bg-images：hover css但仍然无法使用。当我这样做时，光标在悬停时会改变，但第二个图像根本不会弹出。 （我现在编辑了语法并将编辑这些注释）

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);
}