0

我坐下来玩弄一个想法，当您将鼠标悬停在图像上时，图像上方会出现一个小图标。我试过这样做：

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

2 回答 2

0

这应该可以工作，请测试它：

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

将代码添加到您的css文件中

于 2013-11-04T12:23:35.357 回答
0

检查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>
于 2013-11-04T12:55:13.917 回答