Jump to content

Show Hyperlink Underline on Image Hover

Go to solution Solved by tuanphan,

Recommended Posts

Hi there,

 

I have created a hyperlink that only displays the hyperlink underline if your mouse cursor is hovering over the text, as can be seen in the image attached (cursor is there although you can't see it, the screenshot didn't include the cursor). I am trying to create the same effect when you hover over the image above the hyperlink, but I am not sure how I can achieve this.

 

Thanks

Screenshot 2023-10-18 121835.png

Link to comment
On 10/21/2023 at 11:29 PM, tuanphan said:

Can you share link to page? We can check/help easier

Here is a link the page (password: newfyber). You can see that when hovering over 'Hamptons', the hyperlink below does not display the underline. But if you hover over the hyperlink text, it shows the underline. I'm trying to get it to show the underline when you are hovering over the corresponding image too, I hope that makes sense.

Link to comment
  • Solution
On 10/25/2023 at 10:23 AM, trianglespace said:

Here is a link the page (password: newfyber). You can see that when hovering over 'Hamptons', the hyperlink below does not display the underline. But if you hover over the hyperlink text, it shows the underline. I'm trying to get it to show the underline when you are hovering over the corresponding image too, I hope that makes sense.

Add this to Website Tools (under Not Linked) > Custom CSS
 

/* Hover image show text underline */
.fe-block-acce60c4e149796dadbc:hover ~ .fe-block-84f28a953fc05a1b2476 h4 a {
    border-bottom: 2px solid;
}

 

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
On 10/27/2023 at 1:22 PM, tuanphan said:

Add this to Website Tools (under Not Linked) > Custom CSS
 

/* Hover image show text underline */
.fe-block-acce60c4e149796dadbc:hover ~ .fe-block-84f28a953fc05a1b2476 h4 a {
    border-bottom: 2px solid;
}

 

This solution has worked flawlessly, thanks for your help! I can work from here :)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.