javascript - 只有在左上方找到图片后才会出现包含信息的框

Question

只有在左侧顶部找到图片时才会出现包含信息的框。 当我将光标移动到左侧顶部或中间的图片上时， 这个框只能通过左上方的图片为我提供信息。

将光标移动到中间图片后，它看起来像一个黑框:

http://imageshack.com/a/img924/6673/dwYNyU.jpg

我的代码:

<div id="content">
    <ul>
        <li>
            <a href="site2.php" class="images">
                <img src="photo.jpg" style="position: absolute; left: 5px; top: 5px" />
            </a>
            <div class="box">
                <p class="data-tooltip1" style="color: yellow">Tekst nr 1</p>
                <p class="data-tooltip2" style="color: red">Tekst nr 2</p>
                <p class="data-tooltip3" style="color: red">Tekst nr 3</p>
                <p class="data-tooltip4" style="color: red">Tekst nr 4</p>
            </div>
        </li>
    </ul>

    <ul>
        <li>
            <a href="site2.php" class="images">
                <img src="photo.jpg" style="position: absolute; left: 400px; top: 250px" />
            </a>
            <div class="box">
                <p class="data-tooltip1" style="color: yellow">Tekst nr 5</p>
                <p class="data-tooltip2" style="color: red">Tekst nr 6</p>
                <p class="data-tooltip3" style="color: red">Tekst nr 7</p>
                <p class="data-tooltip4" style="color: red">Tekst nr 8</p>
            </div>
        </li>
    </ul>
</div>


CSS:
#content
{
    background-color: #C0C0C0;
    width: 1000px;
    height: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
}

ul li
{
    display: block;
}

ul li:hover>.box
{
    display: block;
}

.images
{
    outline: none;
}

.images img
{
    border: 2px solid #000000;
    width: 100px;
    height: 143px;
}

.images img:hover, .images img:focus
{
    border: 2px solid #FF0000;
    cursor: pointer;
}

.box
{
    display: none;
    width: 300px;
    height: 119px;
    border-radius: 5px;
    background-color: #000000;
    position: absolute;
    z-index: 9999;
    top: 14px;
    left: 109px;
}

.data-tooltip1
{
    margin-left: 8px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: bold;
}

.data-tooltip2
{
    margin-left: 8px;
    font-size: 11px;
}

.data-tooltip3
{
    margin-left: 8px;
    font-size: 11px;
}

.data-tooltip4
{
    margin-left: 8px;
    font-size: 11px;
}

黑框出现在左上方的图片旁边，应该从中间的图片处跳出来。 我的代码需要改进什么，以便在将光标移动到中心图片后，该中心图片会出现一个黑框？

Answer 1

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

(来源:http://www.w3schools.com/css/css_positioning.asp)

如果我理解正确的话，如果您将鼠标悬停在该图像上，您希望在右侧图像旁边显示黑框。为此，您需要相对于图像放置黑框。最简单的方法是找到图像和黑盒最近的公共(public)父级(在您的情况下它可以是 <li> )，从 <img src="photo.jpg" style="position: absolute; left: 400px; top: 250px" /> 中获取样式。并适用于整个<li> :

<li style="position: absolute; left: 400px; top: 250px" />