You know those gateway pages? Where you have to read all the way through and find where the right link is because both the 'I agree' and I 'disagree' pages don't work? Well, those are pretty useful sometimes. But a lot of the times it's easy to find where the link is without reading all the way through. That's because links on the site are either a different colour, or have different hover colours. This tutorial shows how to hide a link completely using CSS and link classes! This can also be fun for hiding links only meant for friends and stuff ^_^
So, let's say your text is just regular black, but your links are really fancy- bright orange, green underline, and on hover, we have a dashed yellow border, bright pink background, and white text. That's going to be pretty hard to cover up, since this is what it's going to look like with black text:
To hide this crazy CSS on JUST your hidden link, we're going to have to add something new to our css, a link class. So along with this code, we're going to use the class 'text'. You can name it whatever you want, just I'm naming it 'text', because it's just going to look like plain text. Basically, you're going to cancel out everything in the above code in you text class. Mine will look like this:
a.text{
color: #000000;
text-decoration: none;
border-bottom: none;
}
Now- to make this work with just one link, you're going to add a tiny little code in your link tag. You're going to add class="text" to your tag. So this is what you'd normally have: <a href="URL">Lalalala</a>, now you'll have <a href="URL" class="text">Lalalala</a>. Of course, if you named your class something else, put that in instead of "text".
And there! You have a hidden link! So basically, just match your class CSS with your regular text CSS, then cancel out anything in your link CSS, and there! A hidden link! To take this further, you can even change what kind of cursor hovers over your link to whatever you usually have, but this will only work in Internet Explorer.
