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?

If you leave out all anchors and use span instead you are penalizing yourself on search engines since spiders don't know what to crawl anymore without href. — easwee
– easwee, Commented Dec 28, 2012 at 14:08
@user1787489 can you please clarify what's the advantage of using <span> over <a> in terms of ajax? i'm confused about "onclick ajax events as attributes". thank you so much :) — oikos99
– oikos99, Commented Jan 17, 2019 at 21:37

Dharman · Accepted Answer · 2021-05-03 11:34:03Z

146

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

edited May 3, 2021 at 11:34

answered Dec 28, 2012 at 13:16

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xpda · Accepted Answer · 2013-01-27 04:29:16Z

17

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.

edited Jan 27, 2013 at 4:29

xpda

15.9k8 gold badges54 silver badges83 bronze badges

answered Dec 28, 2012 at 14:06

easwee

16k24 gold badges63 silver badges83 bronze badges

3 Comments

lvoelk Over a year ago

bare in mind that preventDefault() can have unreliable effects in different browsers. It has only been a recent change that IE would even allow you to prevent certain events. While the browsers are becoming more and more standardized overriding default browser behavior should be done carefully and requires a large amount of cross browser testing.

easwee Over a year ago

@Ivoelk show me exact sample when preventDefault() does not work. Also you are replying to a 4 years old answer.

Quentin Over a year ago

:hover is redundant, cursor means "Change the mouse cursor when pointing at this element" and :hover means "when pointing at this element" so you're saying "Change the mouse cursor when you are pointing at this element and when you are pointing at this element".

Amyth · Accepted Answer · 2012-12-28 13:19:47Z

9

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*/
}

answered Dec 28, 2012 at 13:19

Amyth

33k28 gold badges97 silver badges137 bronze badges

1 Comment

pilavdzice Over a year ago

if you have a Single Page App the # will mess with everything, changing the URL when you are not trying to is not always a good idea

Muhammad Bilal · Accepted Answer · 2012-12-28 13:15:57Z

7

Just add cursor:pointer; in your span css.

answered Dec 28, 2012 at 13:15

Muhammad Bilal

4492 silver badges6 bronze badges

Comments

Stefan Neubert · Accepted Answer · 2012-12-28 13:16:10Z

4

Use CSS to display the cursor as a pointer:

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

http://jsfiddle.net/kkepg/

answered Dec 28, 2012 at 13:16

Stefan Neubert

1,0448 silver badges23 bronze badges

Comments

bashleigh · Accepted Answer · 2012-12-28 13:16:25Z

2

You could use an anchor. But within javascript you'd have to use event.preventDefault() But there is a CSS method thats smaller and easier. Keep your span and use this:

span:hover{
    cursor:pointer;
}

answered Dec 28, 2012 at 13:16

bashleigh

9,4145 gold badges33 silver badges50 bronze badges

2 Comments

bashleigh Over a year ago

@StefanNeubert What if he also wanted to add particular properties to the element on hover as well as changing the cursor?

Stefan Neubert Over a year ago

Then of course you need it. But you should always keep your code light and omit unnecessary pseudo-attributes.

Kaivosukeltaja · Accepted Answer · 2012-12-28 13:19:33Z

1

You can change the cursor to a pointer by specifying the cursor: pointer CSS rule.

You can also use <a> tags instead of <span>, in fact they can behave nicer with screen readers and other similar devices. You don't need to leave out the href attribute if you use the preventDefault() and stopPropagation() JavaScript functions in the onClick handler. This way you can retain some level of backward compatibility with non-JS enabled browsers.

answered Dec 28, 2012 at 13:19

Kaivosukeltaja

15.8k5 gold badges45 silver badges71 bronze badges

Comments

Ferdinand · Accepted Answer · 2021-01-29 13:36:12Z

0

You could use a button instead of span and use bootstrap css classes to style it like a link:

<button class="btn btn-link">Link</button>

It will react on mouseOver as normal links do. Run the code snippet to preview the result:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-link">this is my link styled with bootstrap</button>

answered Jan 29, 2021 at 13:36

Ferdinand

795 bronze badges

2 Comments

phoenixstudio Over a year ago

This does not provide an answer to the question. You can search for similar questions, or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, ask a new question, and include a link to this one to help provide context. See: Ask questions, get answers, no distractions

Kiriakos Grhgoriadhs Over a year ago

This is not an answer to this question. It is written how to make a span looks like a link

SylvainL · Accepted Answer · 2012-12-28 14:34:43Z

You can use an onClick event but if I remember correctly, you must return false in order to prevent your page from jumping around; something like:

<a href="#" onClick="myfunction();return false;">

or: <a href="#" onClick="return myfunction();"> provided that myfunction will return false.

You can also directly call a javascript from href but you must cast the result to void in order to block to the browser to try to follow the result as a valid link:

<a href="javascript:void(myFunction())">

Even if you still want to use the onClick property; it would still be a good idea to replace the href="#" with href="javascript:void(0)" ...>.

Other people have mentionned using the event.preventDefault() and stopPropagation(). I don't remember ever using one of these but I must admit that it has been many years since the last time that I have coding some javascript in a HTML link; so you should definitely investigate the use of these two functions.

EDIT: maybe that using a href="javascript:void(0)" could be a bad idea sometimes; see http://drupal.org/node/1193068 .

Collectives™ on Stack Overflow

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

9 Answers 9

Comments

3 Comments

Option1

Option2

1 Comment

Comments

Comments

2 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

3 Comments

Option1

Option2

1 Comment

Comments

Comments

2 Comments

Comments

2 Comments

Comments

Linked

Related