Can I change the reference of an HTML link using only CSS?
I have various a links in my website currently. However, some of them will be deactivated at certain points. I was wondering if I can change the href attribute of an a link using ONLY CSS (no JavaScript or anything similar). Preferably a solution using CSS 2 or 1, but if an opti开发者_StackOverflowon exists only in CSS 3 then that's fine too.
Note that I know that there are many, many ways of doing this. I just want to know if there's a CSS trick for it.
No. This is not what CSS is for. CSS stands for Cascading Style Sheets. Change the target URL is nothing to do with the style of the page.
As you say, there are many other options for this sort of thing. JavaScript (or jQuery) would be the best solution for this.
No - CSS is only for applying styles to elements, not changing the way they work.
You can't do this with CSS - there is no "hidden trick".
CSS3 has selector that act on attributes, e.g. "href", but support in earlier versions of CSS is sketchy.
On top of that you couldn't directly disable the link, but you could try doing a rope-a-dope:
HTML:
<a href="my-page.html" class="live-link">Click here</a><a href="my-page.html" class="dead-link">Click here</a>
CSS3:
a[href='my-page.html'].live-link {display:hidden}
a[href='my-page.html'].dead-link {display:inline}
...That's just proof-of-concept though, chances are you'd need some logic somewhere to decide when the display values for "live-link" and "dead-link" are swapped.
精彩评论