Disable click through on summary block with hover css

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; }
}
 

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.

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? 
 

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.

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;

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>