悬停在图像上方，使用背景图片生成另一张图像，并且不影响下方的图像。

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

我很难想象如何在悬停时让另一张图片覆盖在另一张图片上方。有很多关于如何将HTML 与CSS background-image组合以及如何将一个图像更改为另一个的解释，但没有太多关于如何将一个图像放在另一个图像上方的解释。请注意，check.png应该放在右上角，这样它就在div之外。请提供任何见解！谢谢。

编辑： 感谢Mathias的快速回复，那是一个小错误。我在.book_div:hover CSS中实现了多个bg-images，但仍然无法实现。当我这样做时，光标在悬停时会更改，但第二个图像根本不会弹出。 （我现在已经编辑了语法，并将编辑后的注释编辑在这些注释中）

- steviesh

---

使用逗号分隔多个背景图片。在此阅读关于层叠顺序的信息：http://css-tricks.com/stacking-order-of-multiple-backgrounds/ - Mathias

感谢您的及时回复，Mathias。那只是一个小错误。我在 .book_div:hover 的 CSS 中实现了多个背景图像，但仍然无法正常显示。当我这样做时，光标会在悬停时改变，但第二个图像根本不会弹出。（我现在已经编辑了语法，并将编辑这些注释） - steviesh

这就是为什么我添加了链接。第一张图片应该放在顶部，因此检查应该首先进行。 - Mathias

Answer 1

当声明多个背景图像时，应该将顶部图像放在首位。

我发现这篇文章非常适合解释背景图像的堆叠顺序: http://css-tricks.com/stacking-order-of-multiple-backgrounds/ 希望这可以帮助你！ 演示

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

- Mathias

---

太好了！成功让它工作了。但现在我需要找出如何定位复选标记（check mark），如果可能的话。另外，有没有办法在悬停期间保持背景图像不变，而不必重新定义它？ - steviesh