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

我创建了一个带有模式弹出控件的网页。 在这个控件中,我动态地构建一个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来实现,而我只是缺少某些东西/作为新手。

卡尔


尝试添加这个:

a { display:block; position:relative }

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

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

链接地址: http://www.djcxy.com/p/83655.html

上一篇: CSS Hover effect within Modal popup issue

下一篇: 100% Browser Width Div Inside Smaller Div