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

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?

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

Solution 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.

Solution 3:

Just add cursor:pointer; in your span css.

Solution 4:

Option1

Just use an anchor link as follows:

<a href="#" onclick="someFunction();"> Link </a>

Option2

I don't know why you would wanna use span , but if you do you can do the following styles to make it look similar to an anchor link.

span {
    color: #000000; /* Change this with links color*/
    cursor: pointer;
    text-decoration: underline;
}

span:hover {
    color: #444444; /* Change the value to with anchors hover color*/
}

Solution 5:

Use CSS to display the cursor as a pointer:

<span style="cursor: pointer;">Pseudolink</span>

http://jsfiddle.net/kkepg/