I am trying to make info pop-up when you select certain links while other links will just be normal links, to do this I understand I should use a class selector and in fact have the following css which works when popup is used as a class for the paragraph the link is in. However when I try to use it as the class for the link it seems to do nothing. What should be done so that I may use the popup class on one link in a paragraph but not in other links in the same paragraph. Here is the css and a sample html use of it
CSS
.popup a {position:relative;}
.popup a span {display: none} /* hides text between span */
.popup a:hover span {
position: absolute;
top: 5px;
left: 30px;
display: block;
background: #fdd;
border: 1px solid red;
}
html example that works
Untitled Document
this is a normal textthis is added test text
html example that doesn't work
Untitled Document
a.popup
a.popup {position:relative;}
a.popup span {display: none} /* hides text between span */
a.popup:hover span {
position: absolute;
top: 5px;
left: 30px;
display: block;
background: #fdd;
border: 1px solid red;
}
Yeah that seems to work
That does seem to work, so now I have to ask the question why does that work but my original method not work, in essence what is the difference.
I think I see maybee
I think I might have figured it out. In the first case the popup would only work if the object it is a class for has a link within it, Not if it is a link itself. While the second case you have to use a before in order to be allowed to give popup the properties it has, is that right?
Your original example
Your original example referred to anchors contained within an element with a class of popup. My example is for anchors (links) with a class of popup which corresponds with the HTML you gave in your 2nd example.