Jump to content

Disable click through on summary block with hover css

Recommended Posts

Hi, my page is https://cotehospitality.squarespace.com/cote-hospitality and it's the second section on the page. I have created a summary, which I have given a css code to change opacity on hover. My question now is how to disable the click through at the same time. I cannot set the pointer-events to none because then it also disables my hover effect. Can anyone help with this?

 

This is the css code I am using on my summary block.

 

section[data-section-id="650c348687de9343d0ad80f7"] {
.summary-item {opacity: 50%; transition: opacity 1.8s ease;}

.summary-item:hover {opacity: 100%; transition: opacity 1.8s ease; }
}
 

Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Try this tweak to your code:

section[data-section-id="650c348687de9343d0ad80f7"] {
  .summary-item {
    opacity: 50%; 
    transition: opacity 1.8s ease;
    &:hover {
      opacity: 100%;
    }
    &:active {
	  pointer-events: none;
    }
  }
}

The pointer-events:none; on :active should prevent click-though but keep the hover.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Ziggy said:

Try this tweak to your code:

section[data-section-id="650c348687de9343d0ad80f7"] {
  .summary-item {
    opacity: 50%; 
    transition: opacity 1.8s ease;
    &:hover {
      opacity: 100%;
    }
    &:active {
	  pointer-events: none;
    }
  }
}

The pointer-events:none; on :active should prevent click-though but keep the hover.

Hi Ziggy, thanks for the quick response. It worked adding !important at the end of the code, however, the URL of the post still shows up at the bottom. Is there a way to completely disable this? 
 

Screenshot 2023-09-21 at 18.33.53.png

Link to comment
10 minutes ago, Ziggy said:

Try this tweak to your code:

section[data-section-id="650c348687de9343d0ad80f7"] {
  .summary-item {
    opacity: 50%; 
    transition: opacity 1.8s ease;
    &:hover {
      opacity: 100%;
    }
    &:active {
	  pointer-events: none;
    }
  }
}

The pointer-events:none; on :active should prevent click-though but keep the hover.

It's also still showing the pointer by the way, it is just not going anywhere anymore on click.

Link to comment
1 minute ago, charlineca said:

It's also still showing the pointer by the way, it is just not going anywhere anymore on click.

You can add this to change the cursor:

cursor: default;

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try this script in header code injection:

<script>
// Get the <a> tag element
const linkElement = document.querySelector('.summary-thumbnail-outer-container a');
// Remove the link element from the DOM
linkElement.parentNode.removeChild(linkElement);
</script>

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.