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