How do I style a span to look like a link without using javascript?

Question

For my website I will need to use <span> instead of <a>, because I am using mostly ajax and thus instead of links I have onclick ajax events as attributes in my spans.

As a result, I had to manually style the spans to look like links. I have used hover and visited pseudo classes to change background and text colour, but to change the mouse default to a pointer finger on hover, will I need to use javascript? Or can I do that using css?

Also, I have just realized: I could not just use the <a> tag anyways instead of <span>, but just instead of an href, I would include an onclick? It should work just the same, no?

Answer 1

span {      cursor:pointer;      color:blue;      text-decoration:underline; }

<a href="#">Hyperlink</a><br /> <span>Span</span>

Additionally, you can use :hover pseudo-class to style the element when hovered (you can use any styles not just the ones originally used). For example:

span:hover {      text-decoration:none;      text-shadow: 1px 1px 1px #555; } 

Answer 2

Note that if your website is public and you are counting on search engines to crawl your site, you lose a lot by leaving out links without href since spiders have nothing to grab on while crawling your page.

You should use a complete link - in case your javascript breaks down the user is still able to navigate through pages:

<a href="http://www.example.com">Link</a> 

than you can disable the link with jquery by using preventDefault() - and you totally separated base html and the javascript part, meaning your site is still usable without javascript on.

Than you don't need to bother with span hover and anything - but just for the sake of it

span:hover { cursor:pointer; } 

will enable hover hand cursor on hovered span.