PRobbe Posted November 15, 2021 Share Posted November 15, 2021 (edited) Site URL: https://grasshopper-earthworm-y2ge.squarespace.com/ Hi, I have been str ugling with getting text to display when hovering over an image. The text isn't part of the image but a seperate code/text block. I saw some examples on the forum showing how you can use the hover call + display in CSS to achieve this and it works for me when I stay in the same code block. Is there a wa y where I can hover on a image block and it then displays the text on the right side in its own text or code block? This is what I use right now in the CSS: .naming:hover + #block-yui_3_17_2_1_1636981862686_7307{ display:block; } #block-yui_3_17_2_1_1636981862686_7307{ display:none; } Site adress: https://grasshopper-earthworm-y2ge.squarespace.com/ Password: november2021 Thanks in advance for any help or suggestions! 🙂 Edited November 15, 2021 by PRobbe Link to comment
Solution Beyondspace Posted November 16, 2021 Solution Share Posted November 16, 2021 (edited) On 11/15/2021 at 8:31 PM, PRobbe said: Site URL: https://grasshopper-earthworm-y2ge.squarespace.com/ Hi, I have been str ugling with getting text to display when hovering over an image. The text isn't part of the image but a seperate code/text block. I saw some examples on the forum showing how you can use the hover call + display in CSS to achieve this and it works for me when I stay in the same code block. Is there a wa y where I can hover on a image block and it then displays the text on the right side in its own text or code block? This is what I use right now in the CSS: .naming:hover + #block-yui_3_17_2_1_1636981862686_7307{ display:block; } #block-yui_3_17_2_1_1636981862686_7307{ display:none; } Site adress: https://grasshopper-earthworm-y2ge.squarespace.com/ Password: november2021 Thanks in advance for any help or suggestions! 🙂 Your image block and text block are located in different parent node. So using Css selector can not reach your desired result. I suggest using the following code in Home > Settings > Advanced > Code Injection, choose the footer <script> document.addEventListener('DOMContentLoaded', () => { const hoverItem = document.querySelector('#block-yui_3_17_2_1_1636454313626_16083'); const targetText = document.querySelector('#block-yui_3_17_2_1_1636976739645_7146'); hoverItem.addEventListener('mouseover', () => { targetText.style.display = 'block'; }) hoverItem.addEventListener('mouseout', () => { targetText.style.display = 'none'; }) }) </script> <style> #block-yui_3_17_2_1_1636976739645_7146 { display: none; } </style> Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too Edited November 16, 2021 by bangank36 PRobbe 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
PRobbe Posted November 22, 2021 Author Share Posted November 22, 2021 This worked like a charm! Thank you for the help. Beyondspace 1 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