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页面中使用控件时，这非常有效。它似乎在模态弹出控件中工作，直到我需要在表数据大于模态窗口时向下滚动模态控件。

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

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

卡尔

Answer 1

尝试添加此内容：

a { display:block; position:relative }

这将使span.pop与其所在的标签相对定位。

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

模态弹出问题中的CSS悬停效果

1 个答案: