- How to Hide Links Using CSS
- Disable the Pointer Event
- Write the HTML Correctly
- Use This CSS Code
- Change the Link’s Color
- Define a Custom Class
- Find out What Color to Use
- Customize the CSS to Change the Color
- Using Javascript and/or CSS
- showing (and hiding) text and links
- Text
- Hiding and/or showing text with CSS
- Hiding and/or showing text with Javascript
- Escaping Characters in Javascript
- Javascript Text Link
- CSS/Javascript Text
- How TO — Toggle Hide and Show
- Toggle (Hide/Show) an Element
- Example
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
How to Hide Links Using CSS
Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.
Hiding a link with CSS can be done in a number of ways, but we’ll look at two methods in which a URL can be completely hidden from view. If you want to create a scavenger hunt or easter egg on your site, this is an interesting way to hide links.
The first way is by using none as the pointer-events CSS property value. The other is by simply coloring the text to match the background of the page. Neither method hides the link if someone inspects the HTML source code. However, visitors will not have a simple, straightforward way in which to see it, and your novice visitors won’t have a clue how to find the link.
Disable the Pointer Event
The first method we can use to hide a URL is to make the link do nothing. When the mouse hovers over the link, it won’t show what the URL points to and it won’t let you click it.
Write the HTML Correctly
One the web page, make sure the hyperlink reads like this:
Lifewire.com
Of course, «https://www.lifewire.com/» needs to point to the actual URL that you want hidden, and Lifewire.com can be changed to any word or phrase you like that describes the link.
The idea here is that the class active will be used with the CSS listed below to effectively hide the link.
Use This CSS Code
The CSS code needs to address the active class and explain to the browser that the event upon the link click, should be none, like this:
.active pointer-events: none;
cursor: default;
>
You can see this method in action over at JSFiddle. If you remove the CSS code there and then rerun the data, the link suddenly becomes clickable and usable. This is because when the CSS isn’t applied, the link behaves normally.
If the user views the page’s source code, they’ll see the link and know exactly where it goes because like we see above, the code is still there, it just isn’t usable.
Change the Link’s Color
Normally, a web designer will make hyperlinks a contrasting color from the background so that visitors can see them and know where they go. However, we’re here to hide links, so let’s see how to change the color to match that of the page.
Define a Custom Class
If we use the same example from the first method above, we can simply change the class to whatever we want so that only special links are hidden.
If we didn’t use a class and instead applied the CSS from below to every link, then all of them would disappear. That’s not what we’re after here, so we’ll use this HTML code that’s using the custom hideme class:
Lifewire.com
Find out What Color to Use
Before we enter the appropriate CSS code to hide the link, we need to figure out what color we want to use. If you have a solid background already, like white or black, then that’s easy. However, other special colors need to be exact too.
For instance, if your background color has a hex value of e6ded1, you need to know that for the CSS code to work properly.
There are plenty of these «color picker» or «eyedropper» tools available, one of which is called ColorPick Eyedropper for the Chrome browser. Use it to sample the background color of your web page to get the hex color.
Customize the CSS to Change the Color
Now that you have the color that the link should be, it’s time to use that and the custom class value from above, to write the CSS code:
If your background color is simple like white or green, you don’t have to put the # sign before it:
See this method’s sample code in this JSFiddle.
Using Javascript and/or CSS
This page was created as a result of a puzzle to deal with the still-used but ancient browser NS4. More and more people don’t want to bother taking the time to deal with this obsolete browser. But even if you don’t care whether or not NS4 can handle your webpages, you may find something useful here describing two different ways that can be used to hide and show text in an HTML file by using Javascript and/or CSS.
showing (and hiding) text and links
Warning! I am not an expert in Javascript or CSS. But the following instructions using relatively simple coding do work for me. This method will get you started with javascripting and/or CSS. It should display in all the later browsers and most of the earlier ones.
Text
Hiding and/or showing text with CSS
To hide and/or show text with CSS, you must create two different stylesheets. For this example, you will see style.css and style_insert.css. Of course, your .css files can be named anything you want.
If you look at the source code of this page, you will see that there are 2 sentences below. The first sentence will appear only in NS4 and browsers with CSS disabled. The second sentence will appear only in current browsers and any browser with CSS disabled. The second half of the second sentence will only appear in NS4 with javascript disabled. Only those with CSS disabled will see all three phrases in their entirety.
This class=»ns4″ sentence should only show up in browsers with CSS disabled and NS4.
This class=»later» sentence should only show up in current browsers.
. and NS4 with javascript (and CSS) disabled.
how style.css looks:
@import url(style_insert.css); how style_insert.css looks: You can safely change the sections that are in bold text in the above example. The stylesheet that is called for in is the stylesheet that is for the more ancient browser. The stylesheet that is called for by the @import url is for current browsers. It is essential that the @import url be placed on the first line of your main stylesheet. Also make sure that your class names remain in the same order in the two stylesheets. Note the !important that appears beside the two show/hide styles in the stylesheet to be read by current browsers. This is because the majority of your viewers will be using more recent browsers. Perhaps you would also like to hide text from all browsers with javascript disabled. To do that, you can use document.write . To show text to browsers with javascript disabled, you can use and If you look at the source code of this page, you will see that there are 2 sentences below. The first sentence will appear only in browsers with javascript enabled. The second sentence will appear only browsers with javascript disabled. Copy the following section and paste it below in your HTML file. You can safely change the sections that are in bold text. Note that you can place different text for browsers with javascript disabled (indeed, this is often desirable). This is done in the section. As you may have noticed from looking at the above example, the HTML after document.write looks slightly different than it does normally. This is because the characters «(quotation mark), ‘(single quote) and /(forward slash) are integral to the javascript code itself. So depending on how your javascript is constructed, at least two of these characters must be escaped when used in a javascript. To do that, a \ (backward slash) is placed before each of the aforementioned characters. Without these backward slashes, there is a very high likelihood that your script will not appear at all. If you wish to display «(quotation marks) after document.write , precede the character with \ (backward slash). Or you can also use the character entity rather than the character itself. For instance, if you want to display the sentence Murphy’s Law states, «Everything that can go wrong will go wrong.» You would type the following inside your script tags: document.write(« Murphy’s Law states, \«Everything that can go wrong will go wrong.\«\/p>»); code: Murphy’s Law states, "Everything that can go wrong will go wrong."\/p>»); Another way to get around this problem is to always use single quote marks to surround the document.write text. However, in that case, then all instances of ‘(single quote) would have to be escaped. They can either be preceded by the \ (backward slash) or replaced with ' . And the / (forward slash) will still have to be escaped: document.write(‘ Murphy\‘s Law states: «Everything that can go wrong will go wrong.»\/p>’); code: Murphy's Law states: «Everything that can go wrong will go wrong.»\/p>’); No matter how you look at it, unless you avoid the use of the characters ‘, « and / completely, some escaping of characters may be required in your document.write text area. Please read more about character entities here. To display the following phrase and link with javascript, use document.write . A different message is displayed when javascript is disabled. You can safely change whatever parts are in bold text in the above example. Whatever is typed after document.write must remain on the same line of coding (ie: no line breaks). Also, remember to escape any characters that are integral to the javascript code. Otherwise, your script will most probably not appear anywhere. If nothing is put between , or if the noscript tag is left out altogether, nothing will show in a browser with javascript disabled. There are five sentences in the source code. The first three will appear only to those browsers with javascript enabled. The fourth will appear in browsers with javascript disabled and the second half of the fourth will also appear in all browsers with javascript disabled. The fifth will appear only in ancient browsers with javascript disabled. To display the text, document.write and are used. You can safely change whatever parts are in bold text in the above example. Whatever is typed after document.write must remain on the same line of coding (ie: no line breaks). Also, remember to escape any characters that are integral to the javascript code. Otherwise, your script will most probably not appear anywhere. The reason that class=»later» phrases show up in ancient browsers with javascript disabled is because the people who designed those browsers inexplicably intertwined CSS and javascript. In the ancient browser, if javascript is disabled, so is CSS. This is just one of the many many reasons that you really should upgrade your browser. Remember, if nothing is typed between , or if the noscript tag is left out altogether, nothing at all will show in any browser with javascript disabled. Confused? For more detailed and much better instructions, please go to JavaScript Kit, JavaScript tutorial — The W3C DOM and/or W3Schools Javascript Tutorial. Free javascripts are available from The Javascript Source, Dynamic Drive and JavaScript Resources!as well as many others. Toggle between hiding and showing an element with JavaScript. function myFunction() < Tip: For more information about Display and Visibility, read our CSS Display Tutorial. If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: Your message has been sent to W3Schools. W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
.ns4 >
.later < display:none; >
[rest of styles follow. ] Hiding and/or showing text with Javascript
Escaping Characters in Javascript
document.write(«
document.write(‘Javascript Text Link
CSS/Javascript Text
How TO — Toggle Hide and Show
Toggle (Hide/Show) an Element
Step 1) Add HTML:
Example
Step 2) Add JavaScript:
Example
var x = document.getElementById(«myDIV»);
if (x.style.display === «none») <
x.style.display = «block»;
> else <
x.style.display = «none»;
>
> 
COLOR PICKER
Report Error
Thank You For Helping Us!
Top Tutorials
Top References
Top Examples
Get Certified