LizzyJo Posted January 22, 2021 Share Posted January 22, 2021 Site URL: https://www.itsnicetohearyou.com/ Hi! I am trying to figure out how to change the word in my navigation when someone hovers over it. For example, when someone hovers over "instagram" and it turns red, I also want it to turn into the instagram handle (@itsnicetohearyou). How to I change a word on hover? Thank you! Link to comment
tuanphan Posted January 24, 2021 Share Posted January 24, 2021 Hi. I don't see "instagram" text. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
LizzyJo Posted January 26, 2021 Author Share Posted January 26, 2021 On 1/23/2021 at 5:39 PM, tuanphan said: Hi. I don't see "instagram" text. Do you still need help on this? @tuanphan it is the "follow" text that I want to change to "@itsnicetohearyou" on hover. As well as "get in touch" to be the email address on hover. Thank you so much! Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 On 1/25/2021 at 7:17 PM, LizzyJo said: @tuanphan it is the "follow" text that I want to change to "@itsnicetohearyou" on hover. As well as "get in touch" to be the email address on hover. Thank you so much! Add to Design > Custom CSS /* Chage text on hover */ a.Header-nav-item[href*="instagram.com"]:hover { visibility: hidden; } a.Header-nav-item[href*="instagram.com"]:hover:after { visibility: visible; content: "@instagram-text"; } a.Header-nav-item[href*="mailto"]:hover { visibility: hidden; } a.Header-nav-item[href*="mailto"]:hover:after { visibility: visible; content: "tuanphan@squarespace.com"; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Offdaze Posted March 10 Share Posted March 10 Hi @tuanphan I am trying to replace my Navigation link of "Research & Development" with "Coming Soon" on hover, but the "Coming Soon" is just appearing next to the navigation link rather than replacing it, any ideas? /* Change text on hover */ .header-nav-item a[href*="/research-and-development"]::after { content: "Coming Soon" !important; opacity: 0 !important; transition: opacity 0.3s ease-in-out !important; pointer-events: none; } .header-nav-item a[href*="/research-and-development"]:hover::after { opacity: 1 !important; } https://www.ud-hub.com/ Link to comment
tuanphan Posted March 12 Share Posted March 12 On 3/10/2023 at 9:48 PM, Offdaze said: Hi @tuanphan I am trying to replace my Navigation link of "Research & Development" with "Coming Soon" on hover, but the "Coming Soon" is just appearing next to the navigation link rather than replacing it, any ideas? /* Change text on hover */ .header-nav-item a[href*="/research-and-development"]::after { content: "Coming Soon" !important; opacity: 0 !important; transition: opacity 0.3s ease-in-out !important; pointer-events: none; } .header-nav-item a[href*="/research-and-development"]:hover::after { opacity: 1 !important; } https://www.ud-hub.com/ Add this to Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $('div.header-nav-item a[href="/research-and-development"]').hover(function(){ $(this).text("Coming Soon"); }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment