CSS Hover effect within Modal popup issue

i have created a web page with a modal popup control. Within this control i dynamically build a html to display data. Within some of the tables tags i have the following:

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

i want to create a popup effect when hovering over the tag. My CSS is:

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;
}

This works perfectly when i use the control within a standard HTML page. It appears to work within the modal popup control, until i need to scroll down the modal control when the table data is larger that the modal window.

The hover effect then appears to not be working. I think this is because im using the "position":"absolute" for the ".pop" class, and the hover effect is working, but its position is no longer relative to the tag because I have scrolled through the page.

I am not able to get round this and its killing me. Do i need to dynamically reposition the control using a "mouseover" event, or can this be achieved via CSS, and I'm just missing something / being a novice.

Karl

---

Try adding this:

a { display:block; position:relative }

This will make the span.pop be positioned relativily to the a tag it is in.

example: http://jsfiddle.net/R4Erw/

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

上一篇: 跨度的图像悬停过渡

下一篇: Modal弹出式问题中的CSS悬停效果