Question

当我将鼠标悬停在图像上时，我正坐在那里玩弄了一个想法，然后在图像上方出现了一个小图标。我试过这样做：

HTML：

    <figure>
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;">
<img src="/indhold/img/sog/sog.png" class="iconIMG">
<p><?php echo date("d-m-Y", strtotime($dag));;?></p>
</div>
</figure>

CSS：

.lukIMG {
    position: relative;
}
.lukIMG p {
    position:absolute;
    bottom: -4px;
    right: 1px;
    padding: 5px 10px;
    background-color: #002855;
    color: #FFF;

    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
.lukIMG .iconIMG { position: absolute; display: none; }

EIDT HTML和CSS：

HTML

    <div class="lukIMG">
    <img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;" class="cl1">
    <img src="/indhold/img/sog/loading.gif" class="cl2" width="25px;" height="25px;">
    <p>dato</p>
</div>

CSS

    .lukIMG {
    position: relative;
}
.lukIMG p {
    position:absolute;
    bottom: -4px;
    right: 1px;
    padding: 5px 10px;
    background-color: #002855;
    color: #FFF;

    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
.cl1:hover+img
{
    position:absolute;
    left:0;
    top:0;
    z-index:3;
}
.cl1
{
    z-index:2;
}
.cl2
{
    z-index:1;
}

Answer 1

这应该是有效的，请测试一下：

.lukIMG .iconIMG:hover { position: absolute; display: block; z-index:999}

将代码添加到css文件

Answer 2

检查 DEMO 或以下代码：

<html>
    <head>
        <script>
        </script>

        <style>
            img
            {
                position:absolute;
            }
            img.cl1:hover+img
            {
                position:relative;
                left:0;
                top:0;
                z-index:3;
            }
            img.cl1
            {
                z-index:2;
            }
            img.cl2
            {
                z-index:1;
            }
        </style>
    </head>
    <body>
        <img src="1.jpg" width=200 height=200 class="cl1"/>
        <img src='2.gif' class="cl2"/>
    </body>
</html>

图片上方有一个小图标

2 个答案: