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
shannonandanjna Posted September 14 Share Posted September 14 On 3/12/2023 at 1:36 AM, tuanphan said: 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> Hi @tuanphan! This works great to change the text on hover, but it isn't changing back when I remove my cursor. I'd like it to change text when I hover and then return to normal when I remove it. What's the best way to make that happen? Also, is there a way to have the text change when the page is active? Here's a breakdown of what I'd like to do: Normal: WHO Upon hover: Who We Are Upon removing: WHO After clicking and actively on the page: Who We Are Thanks! Link to comment
tuanphan Posted September 17 Share Posted September 17 On 9/15/2023 at 3:29 AM, shannonandanjna said: Hi @tuanphan! This works great to change the text on hover, but it isn't changing back when I remove my cursor. I'd like it to change text when I hover and then return to normal when I remove it. What's the best way to make that happen? Also, is there a way to have the text change when the page is active? Here's a breakdown of what I'd like to do: Normal: WHO Upon hover: Who We Are Upon removing: WHO After clicking and actively on the page: Who We Are Thanks! Use this, if it doesn't work, please share site url, we can check easier <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"); }, function(){ $(this).text("WHO"); }); </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