LPearlstine Posted January 4 Share Posted January 4 In the post Make list images clickable Squarespace 7.1, @tuanphan provided a great solution for making the whole card area clickable. Prior to using this solution however, I had a hover animation effect on the list images. Since this solution expands the button to transparently cover the entire card area, hovering over the image no longer works to trigger the animation. My question is if there is a way to still have individual elements (e.g., the image, title, description) responsive to hover after making the whole card clickable? incidentally, the animation I'm using is .list-item[data-is-card-enabled="true"] img:hover{ transform: scale(1.2); transition: .4s; overflow: hidden; } which causes the image to expand slightly when you hover over it. Currently, I have set the image z-index high so the animation works, but that means the card is clickable, but not over the image. THANKS The site has not been made public and is password protected- see2theSea@dawn Link to comment
LPearlstine Posted January 4 Author Share Posted January 4 the site is https://www.conservenassau.org/wildlifecorridors#resources Link to comment
Ziggy Posted January 4 Share Posted January 4 I think the setup that you have now is probably about the best solution. The click through is not the same element that is animated so you have to put one ahead of the other. You may be able to trigger the image animation based on the button hover state. Something along these lines: button:hover { img { transform:scale(1.2); } } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
LPearlstine Posted January 4 Author Share Posted January 4 Thanks much Ziggy for your comments and suggestion. Unfortunately it didn't work. The overlain button container still wins. Link to comment
Solution jpeter Posted January 5 Solution Share Posted January 5 (edited) @LPearlstine Here's also a JS solution JS (function () { // Get list items on the page. const listItems = document.querySelectorAll('.user-items-list-item-container > .list-item'); // Loop through each list item and attach a `click` event to it. listItems.forEach(function (listItem) { // Get the link contained in the list item. const link = listItem.querySelector('a.list-item-content__button'); // If a link exists, attach a 'click' event to the list item that will // click the link whenever a user clicks the list item. if (link) { listItem.addEventListener('click', evt => { evt.currentTarget.querySelector('a.list-item-content__button').click(); }); } }); })() Make sure you add this between <script> tags, e.g. <script> // Add JS here </script> Here's a working example of the JS running via Chrome's dev console: Wildlife Corridors — Conserve Nassau - 5 January 2023.mp4 Edited January 5 by jpeter Link to comment
LPearlstine Posted January 5 Author Share Posted January 5 Nice. Thanks for working this out. I thought it might be javascript problem, but I wouldn't have known how to do it. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment