Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Disable image click-through but keep hover


css_charlotte

Question

Site URL: https://echidna-gardenia-fcb4.squarespace.com/

I was wondering if there was a way to disable an image click-through while still keeping the hover effect?

This is for a specific image on my site. I have set pointer-events to 'none' which disables the link, however removes the hover text. I can make the hover text visible again using the following code, however this is fixed in place on the image and the 'hover' effect is disabled. 

Is it possible to set pointer-events: none but keep the hover?

Code:

 a.grid-item[href*="/comingsoon"] {pointer-events: none; }   //disables click-through but removes hover//
117
a.grid-item[href*="/comingsoon"] .portfolio-text {opacity: 1 !important;} //reinstates hover text but text is fixed e.g. no hover//

 

Thank you! 

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@tuanphanfirstly, thank you for all your help on this forum. I have already found LOADS of solutions thanks to your various replies. I'd like to bump this thread though. I have the same issue but

@tuanphan @cpearedesign This has been my big issue with a people page with only management having click-throughs. I tired portfolio page and gallery, but the overlay isn't what we want. This is h

9 answers to this question

Recommended Posts

  • 0

@tuanphanfirstly, thank you for all your help on this forum. I have already found LOADS of solutions thanks to your various replies.

I'd like to bump this thread though. I have the same issue but can't quite find an answer. 

I want to disable click-throughs but maintain hover-overs for specific portfolio blocks on the grid.

Any pointers??

thanks!

Link to post
  • 0
On 1/30/2021 at 12:41 AM, cpearedesign said:

@tuanphanfirstly, thank you for all your help on this forum. I have already found LOADS of solutions thanks to your various replies.

I'd like to bump this thread though. I have the same issue but can't quite find an answer. 

I want to disable click-throughs but maintain hover-overs for specific portfolio blocks on the grid.

Any pointers??

thanks!

Can you share site url? We can check easier

Link to post
  • 0

@tuanphan I am trying to do the same thing!! On a portfolio page I need to disable specific links but keep the overlay and hover effects. 

I tired this: but it does nothing:

 

<a href="https://corn-apricot-zn88.squarespace.com/portfolio-2-1/project-two-mtr8w" class="thisLink">Link</a>

<style>
  .thisLink {
       pointer-events: none!important;
       cursor: default;
    } </style>

 

 

 

Link to post
  • 0
20 hours ago, deaton72 said:

@tuanphan I am trying to do the same thing!! On a portfolio page I need to disable specific links but keep the overlay and hover effects. 

I tired this: but it does nothing:

 

<a href="https://corn-apricot-zn88.squarespace.com/portfolio-2-1/project-two-mtr8w" class="thisLink">Link</a>

<style>
  .thisLink {
       pointer-events: none!important;
       cursor: default;
    } </style>

 

 

 

Can you share site url?

Link to post
  • 0

@tuanphan @cpearedesign

This has been my big issue with a people page with only management having click-throughs. I tired portfolio page and gallery, but the overlay isn't what we want. This is how I solved the "turn off the clickthrough, but keep the hover effect." It also change she cursor only to a hand whe there is apointer-event.

after dozens of tries, all I did was target the summary-title-link and it worked like magic!

This works on the summary block, so maybe a few tweaks would make it work on other blocks.

.summary-title-link {cursor:pointer!important;}


.summary-title-link[href*="/url"] {pointer-events: none;}   //disables click-through  

To keep the click through, just type "all"

Edited by deaton72
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...