0

我创建了一个带有模式弹出控件的网页。在这个控件中，我动态构建了一个 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”类使用了“位置”：“绝对”，并且悬停效果正在起作用，但它的位置不再相对于标签，因为我已经滚动了页面。

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

卡尔

4

1 回答 1

2

尝试添加这个：

a { display:block; position:relative }

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

示例：http: //jsfiddle.net/R4Erw/

于 2013-05-02T12:35:52.217 回答