Эффект CSS Hover в Модальном всплывающем выпуске

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-страницы. Он работает в рамках модального управления всплывающим окном, пока мне не потребуется прокручивать модальное управление, когда данные таблицы больше, чем модальное окно.

Тогда эффект зависания не работает. Я думаю, это потому, что я использовал «позицию»: «абсолютный» для класса «.pop», а эффект зависания работает, но его позиция больше не относится к тегу, потому что я прокручивал страницу.

Я не могу обойти это и убить меня. Нужно ли мне динамически перемещать элемент управления с помощью события «mouseover», или это может быть достигнуто с помощью CSS, и я просто что-то упустил/стал новичком.

Карл

Answer 1

Попробуйте добавить это:

a { display:block; position:relative } 

Это сделает span.pop позиционироваться relativily в теге он находится в

пример:. http://jsfiddle.net/R4Erw/