Question

我该怎么做：

图片
图像顶部的一个简单的小DIV，居中的vert / horiz，直到图像翻转才出现

Answer 1

试试这个：

<div style="position:relative;top:0;left:0;">
    <img src="path/2/img.png" style="z-index:1;"
         onmouseover="document.getElementById('hidden').style.display='block';">
    <div id="hidden" style="display:none;position:absolute;z-index:10;"></div>
</div>

如果它适合您，请在部署之前将其清理干净！：）

注意： div＃hidden尚未在图像上居中。如果您事先知道它的宽度和高度，可以使用以下方法：

#hidden {
    top:50%;
    left:50%;
    margin-top: -(heightOfHiddenDiv/2)px
    margin-left: -(widthOfHiddenDiv/2)px
}

否则，您需要在JavaScript中获取宽度和高度的计算值。

Answer 2

如果您可以为<div>设置固定的宽度和高度，那么我建议：

HTML

<div class="hover_image">
    <img width="250" height="300" src="http://pauldwaite.me.uk/images/professional.jpg" />
    <div class="overlay">Hello!</div>
</div>

CSS

.hover_image {
    position: relative;
    float: left;
}

.hover_image .overlay {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 3em;
    margin: -2em 0 0 -55px;
    padding: .5em 5px;
    background: #006;
    color: #fff;
}

.hover_image:hover .overlay {
    visibility: visible;
}

http://jsfiddle.net/ZKXgw/

您可能需要添加一些JavaScript，以使.hover_image:hover能够在早期版本的IE中运行，除了链接之外的任何内容都不支持:hover。

如果你不能有一个固定的宽度/高度，那么实现它将是一件很多的事。

Answer 3

对我而言，事情并不是很清楚，你可以用任何方式使用CSS /样式来解决这个问题。

要将元素居中，您可以将top和left设置为50%，其位置设置为absolute。然后将margin-top高度的一半大小设置为负值，将margin-left宽度的一半大小设置为负值。

要将div放在图像的顶部，其z-index必须高于图像。但首先，图像必须具有较高的z-index，直到它不被翻转。

要在图片顶部显示div，请将图片的z-index更改为div。使用hover或onMouseOver事件。根据您的需要，还有其他方法可以做到这一点。

请参阅action

中的jsfiddle

Answer 4

您可以使用绝对定位的z-index属性将div放在图像的顶部。由于您希望隐藏它，因此请将css中的“display”属性设置为“none”。
您问题的第二部分可以通过使用javascript函数来完成，您可以调用onmouseover [http://www.w3schools.com/jsref/event_onmouseover.asp]。所有功能都必须将元素的“display”属性从“none”更改为“block”。

CSS：第二层元素居中

4 个答案:

HTML

CSS