Text appearing on image hover

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