css - 如何将图像放在 li 中的图像上(悬停时)更改其 z-index

Question

我在 li 中有以下图像:

  <ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /></a> </li>
</ul>

我的 CSS 是这样的:

ul.columns li img {
        position: relative;
        }

    ul.columns li:hover img{
        z-index: 999;
        }

它做了什么:当我将鼠标悬停在图像 (test.png) 上时，图像会得到一个新的 z-index。这是保持图像可见所必需的(悬停时显示一个 div，图像应位于其上方)。这一切都很好。

现在我想在正常图像的右上角有一个图像(显示一个 X，所以我们称之为 x.png)。这个怎么做？使 test.png 成为背景图像不是一种选择。玩过一些类和 z-index 但第二个图像总是出现在 test.png 图像旁边。我想我的 CSS 做错了，但我不知道如何对 li 中的第二张图片进行 z-index

我有这个自动取款机:

<ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /> <img class="x" src="images/x.png" alt="" /></a> </li>
</ul>

谢谢

Answer 1

尝试类似的东西

 ul.columns li img,
 ul.columns li {
    position: relative; /* so the close image is relatively 
                           positioned inside <li> */
    z-index : 1;
 }

 ul.columns li img + img {
    position: absolute;
    top     : 0;
    right   : 0;
    display : none;
 }

 ul.columns li:hover img { z-index: 999; }
 ul.columns li:hover img + img  { z-index : 1000; display: block; }