Modal 弹出问题中的 CSS 悬停效果

Question

我已经创建了一个带有模态弹出控件的网页。在这个控件中，我动态构建一个 html 来显示数据。在一些表格标签中，我有以下内容:

<td>
<a href="#"><span>S</span><span class="pop">description</span></a>
</td>

我想在将鼠标悬停在标签上时创建弹出效果。我的 CSS 是:

a .pop {
    display:inline;
    position:absolute;
    visibility: hidden;
    background-color: #FFFFFF;
    border: solid 2px #000000;
    padding: 5px;
    margin: 0 0 0 10px;
    color: #000000;
    text-align: left;
    font-weight: normal;
}

a:hover .pop {
    visibility: visible;
}

当我在标准 HTML 页面中使用该控件时，这非常有效。它似乎在模态弹出控件中工作，直到当表格数据大于模态窗口时我需要向下滚动模态控件。

然后悬停效果似乎不起作用。我认为这是因为我对“.pop”类使用了“position”:“absolute”，并且悬停效果有效，但它的位置不再相对于标签，因为我已经滚动了页面。

我无法解决这个问题，它要了我的命。我是否需要使用“鼠标悬停”事件动态重新定位控件，或者这可以通过 CSS 实现，而我只是缺少一些东西/我是新手。

卡尔

Answer 1

尝试添加这个:

a { display:block; position:relative }

这将使 span.pop 相对于它所在的 a 标签定位。

例子: http://jsfiddle.net/R4Erw/