CODEWITHSUNDEEP
csshyperlink
Nec
Nec

Reputation: 178

Make a hyperlink unclickable with css

I was wondering is there could be a trick in Css3 how to make a hyperlink loose its function, simply put, to disable the on click function ( so that it appears like a normal hyperlink but has no function like a paragraph) ?

Upvotes: 4

Views: 1395

Answers (3)

user33192
user33192

Reputation: 1182

By any chance if you want this for the parent link of a dropdown menu, like:

<div class="dropdown">
  <a href="#" class="dropdown-parent">Products</a>

  <div class="dropdown-content">
    <a href="#">Product 1</a>
    <a href="#">Product 2</a>
    <a href="#">Product 3</a>
  </div>
</div>

May be you don't want to see # upon hovering the content, neither javascript:void(0).

Then just simply remove the href attribute in the parent link:

  <a class="dropdown-parent">Products</a>

This is valid. ( ref: w3.org )

No need to use any css or js code for that.

For more detail, you can visit this page.

Upvotes: 0

Rakhat
Rakhat

Reputation: 4942

CSS only solution is not cross browser supported at current time. But it is possible using pointer-events: none;

a.disabled {
  pointer-events: none;
}

And there is no need to set disabled link cursor to default, cause links with pointer-events: none; has default cursor already.

Upvotes: 2

mariobgr
mariobgr

Reputation: 2201

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

.inactive {
   pointer-events: none;
   cursor: default;
}

The cursor:default property is if you want the cursor to be just an arrow. If you want it to act like a link (with the "hand" cursor), then remove it.

Upvotes: 6

Related Questions