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

Answers


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/


Need Your Help

Understanding OAuth2 Client credentials flow

java spring rest spring-security oauth-2.0

I'm trying to understand and implement a client credentials flow between our new REST server and our existing client app. I've setup spring-security OAuth2 like this. From my understanding so far, my

alert message box should appear if there occurs any error while validating the contact form

php html website contact-form

A alert box should appear if there occurs any error below while submitting the form. And there should also appear a message box if the form is submitted correctly.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.