Solved

CSS question related to hyperlinks

Posted on 2016-10-11
9
52 Views
Last Modified: 2016-10-11
Is it possible to style a hyperlink so that:

a) The hyperlink can be made non-clickable.
or
b) The style specifies a URL to override the a href declaration.

Thanks,
Steve
0
Comment
Question by:skbohler
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
9 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 41838407
Presuming straight HTML/CSS:
a) No.
b) No.

You could do something like that via javascript, or a back-end coding language (like ASP.Net).
0
 
LVL 20

Accepted Solution

by:
Russ Suter earned 500 total points
ID: 41838611
CSS only deals with style, not functionality. That being said, some styles do actually affect function and there are many tricks you can pull. The downside is that not all browsers interpret CSS the same way. You can sort of disable a link using the following CSS:
a.noclick
{
  pointer-events: none;
}

Open in new window

Then your markup:
<a href="http://www.experts-exchange.com" class="noclick">Experts Exchange</a>

Open in new window

However I'm not sure it will work across all browsers. It does work in Chrome.
Here's a list of browsers that support the pointer-events style: http://caniuse.com/#feat=pointer-events

The 2nd issue is much harder to get around. CSS can do lots of things, even add content but changing attributes is not something I've ever seen done with any real success. Javascript would be the way to do this.

So, the short answer to your questions in order are:
a) Yes (mostly)
b) No, use Javascript
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41838705
Begs the question if you can edit the HTML to add the class why not just remove the href ?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 41838711
Yes, the acceptance of that as a solution makes no sense.
0
 
LVL 20

Expert Comment

by:Russ Suter
ID: 41838733
How does the acceptance of the solution make no sense? It answers the questions asked. Whether or not the implementation is appropriate is a different topic.
0
 

Author Comment

by:skbohler
ID: 41838742
I want to dynamically change the class of the a tag depending on certain factors. If a certain flag is set, I want the link to be inactive. No HTML editing.
0
 
LVL 20

Expert Comment

by:Russ Suter
ID: 41838754
I'm curious. If you're assigning a class to an element aren't you editing the HTML anyway? Or do you have some other way of setting the flag outside the HTML markup?
0
 

Author Comment

by:skbohler
ID: 41838765
The flag will be set via a query to a database.
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41839058
Which implies the page is generated? In which case why generate the link in the first place?
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question