[Firefox Tip] Show Different Cursors for JavaScript Links and Hyperlinks that Open in New Window
This trick is my favorite one and I’m using it since when I started using Mozilla Firefox as my default web browser. I have mentioned it in another topic in past but today I decided to create a separate topic for it so that more people can know about this awesome trick.
There are basically 3 types of hyperlinks in websites:
- Hyperlinks that open in the same window or tab
- Hyperlinks that open in a new window or tab
- JavaScript links
I have a habit of opening all hyperlinks in new tabs so that I can continue reading the current web page. Now if I can know which hyperlink will open in same window and which hyperlink will open in a new window without clicking on it, it’ll definitely save my time and labor. I would not need to right-click on a link and select open in new tab option or middle-click on the hyperlink to open it in new tab.
Advertisement
The trick which I’m going to share in this tutorial will help you in differentiate between all these 3 types of hyperlinks. After applying this trick, you’ll see different cursors for different types of hyperlinks whenever you hover your mouse cursor over them.
When you move the cursor over a link which opens in same window or tab, you get a hand cursor which lets you know that its a hyperlink. But after using this trick, you’ll get a new cursor “Crosshair” for hyperlinks that open in new window or tab as shown in following screenshot:
And new “Move” cursor for JavaScript links as shown in following image:
As you can see it really helps you while browsing websites in Mozilla Firefox. If you also want to have this tweak in your Firefox, check out following simple steps:
1. First of all you’ll need to create a new file userContent.css in “chrome” folder inside your Firefox user profile folder. If you are not aware of this file and your profile folder, check out following article:
Advertisement
All About Mozilla Firefox Profile Folder and Configuration Files
2. Once you create the userContent.css file or if it already exists, open it in Notepad.
3. Now paste following piece of code in the file. If the file already exists and contains some text, paste the code at the end of the file:
/* Change mouse cursor for hyperlinks that open in a new window or tab */
:link[target=”_blank”], :visited[target=”_blank”],
:link[target=”_new”], :visited[target=”_new”] {
cursor: crosshair;
}
/* Change mouse cursor for JavaScript links */
a[href^=”javascript:”] {
cursor: move;
}
4. After pasting the code, save the file and run Mozilla Firefox and you’ll get the new cursors for hyperlinks that open in new window and JavaScript links.
NOTE: If you want to change the cursor style, just change the cursor name given in cursor: section of the above mentioned code. You can use any of following mentioned cursor types:
default – Normal select cursor
text – Text select cursor (I bar)
vertical-text – Vertical text select cursor
progress – Working in background cursor
wait – Busy cursor
help – Help cursor
crosshair – Precision select cursor
move – Move cursor
no-drop – Unavailable cursor
not-allowed – Unavailable cursor
e-resize – Horizontal resize cursor
n-resize – Vertical resize cursor
nw-resize – Diagonal resize 1 cursor
ne-resize – Diagonal resize 2 cursor
col-resize – Column resize cursor
row-resize – Row resize cursor
For example, replace cursor: crosshair; with cursor: wait; in the above mentioned code and it’ll show a busy cursor when you’ll hover the cursor over a hyperlink that opens in new window. Please close and restart Firefox to take effects.
Check out following video to see the output:
Also Check:
[Fix] userChrome.css and userContent.css Codes Stopped Working After Firefox Upgrade
You don’t need to right click to open link in new tab,
just click middle mouse button.
This is very useful.
Thanks for sharing it.
Sorry, but it doesn’t work on my XP Pro SP3 32 bit PC running Firefox 15.0.1. I created the userContent.css file in my %AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\ folder when Firefox was NOT running, then started Firefox to discover that nothing had changed. 🙁
^^ You first need to create Chrome folder inside profile folder and then create the css file inside it.
@Snehil Sarkar
Sure. Just change the cursor name given in cursor: section.
@Subash
Its already mentioned in beginning. 😉
@All
Thanks for your comments guys. 🙂
My bad. Didn’t see that I had to create a chrome folder and put the userContent.css file there.
I now have it working in Firefox AND Palemoon. Will set it up in my Linux distros next.
Thanks a lot! You still have the best web site for the full gamut of tips and tricks!
I too have created the userContent.css file in my %\AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome but it doesn’t work for me!
I am running the nightly version, does this make a difference?
Sorry, posted too early! It is now working correctly!
Any way I can change the cursor from a hand to something else?
Can We Change Different Cursors for it VG~ ?
Ya vg re-read and found that i was unknowingly following common readers behavior ‘just scanning’ and that hurts.
Sorry
Hi VG, it is off-topic but I didn’t find any other place to ask it. Will my product key for 32bit XP work for a 64 bit XP?
^^ It should work.
@Subash
No problem. 🙂
^^ Check following:
https://www.askvg.com/frequently-asked-problems-with-solutions/
Extension Link Alert (addons.mozilla.org/en-US/firefox/addon/link-alert/) works way better than this userstyle trick as it gives you an *icon* of the link – you don’t have to remember what each cursor means.