Summary block Squarespace 7.1 - titles on hover

Site URL: https://ninawells.squarespace.com/

Hi community,

My friend wants her porfolio to look like a wall, so sadly I cannot use the porfolio in SS7.1 because it doesn't have the look she wants. So I've added the elements in a Summary and I replicated the title hover. So far, so good. Now I'm stuck with a problem. She wants the whole tile to be cliccable and I cannot get it to work. 

I've added this code and the jquery CDN in the code injection:

<script>
	$(".summary-title").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});
</script>

I've replicated this in codepen and it works, sadly for some reason this isn't working in Squarespace. 

This code should look up the link inside the div, and make the whole div cliccable.

If anyone has had the same problem/situation and made this work, I would appreciate your help. Or if you have any other solutions that works and you feel like sharing, I would welcome that too 🙂

To access the website the PW is LeontheCat. The affected summary is on the homepage.

Thanks a lot!

Find this code

.summary-title:hover {
    opacity: 1
}

Change it to

.summary-item:hover .summary-title {
    opacity: 1; /* change summary title hover to item hover */
}
.summary-title {
    pointer-events: none; /* enable clickable */
}

Thank you Tuanphan!! It works very well. 🙂

Need to help with these?

Site URL – https://ninawells.squarespace.com/?password=LeontheCat

1. (Desktop – Homepage) Reduce space?

https://ninawells.squarespace.com/?password=LeontheCat

2. (Mobile – Footer) On desktop, text © Nina Wells, 2018-2021 and social icon are on 1 line. On mobile, its cut into 2 lines.

https://ninawells.squarespace.com/?password=LeontheCat