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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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
Beth_King Posted April 19 Share Posted April 19 On 11/16/2021 at 4:23 PM, Beyondspace said: <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> Hello, this is exactly what I want to do on this page but with swatches. So that when you hover on a small circle the word above changes to what that marterial is. The page is here: https://clavichord-trout-3tzg.squarespace.com/product-template Please can you help? Beyondspace 1 Link to comment
Beyondspace Posted May 4 Share Posted May 4 On 4/19/2023 at 4:16 PM, Beth_King said: Hello, this is exactly what I want to do on this page but with swatches. So that when you hover on a small circle the word above changes to what that marterial is. The page is here: https://clavichord-trout-3tzg.squarespace.com/product-template Please can you help? The page is 404? tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! 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