CSS Hyperlink for any text

Question

Question for CSS designers. How do I add anchor behavior to any css class without "<a href.." attribute. Here is what I mean.

I'm going to have this html code:

<span class="my_link">LINK TO SOMETHING </span>

and this text should have link behavior (visited color, active color and underlining, "pointing hand pointer").

Is it possible to make this in css?

Answer 1

The visited and active color will have to be done in Javascript. The pointer and underline can be done like this:

.my_link { cursor: pointer; text-decoration: underline; }

Answer 2

span.my_link { text-decoration:underline; cursor:pointer; }

You could make use of :hover if you want to apply hover styles to it. Though I'm really not sure why you can't use an anchor.

Answer 3

Unless you put it in an tag, you can not get the visited, active, etc colors without javascript. You can however get the pointing hand cursor, and the ability for it to go somewhere when you click on it. To make it have the correct pointer use this:

.my_link{ cursor: pointer; }

and for the clicking, use.

$(".my_link.").click(function(){
location.href="page";
}