4 replies [Last post]
Evoker
Offline
newbie
Last seen: 12 years 48 weeks ago
Timezone: GMT-5
Joined: 2007-01-08
Posts: 3
Points: 0

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

html example that doesn't work

Untitled Document

this is a normal textthis is added test text

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Evoker
Offline
newbie
Last seen: 12 years 48 weeks ago
Timezone: GMT-5
Joined: 2007-01-08
Posts: 3
Points: 0

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.

Evoker
Offline
newbie
Last seen: 12 years 48 weeks ago
Timezone: GMT-5
Joined: 2007-01-08
Posts: 3
Points: 0

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference