Jump to content

show blog post excerpt on hover of summary block item title?

Recommended Posts

Site URL: https://www.insidephilanthropy.com/mental-health-funding-guide-design

Hi everyone, I am trying to show a blog excerpt upon hovering over a summary item's title. I thought I would start by showing the excerpt for the summary item, and then figure out how to target it with CSS to hide it, and show it on hover. But I can't figure out how to target a particular summary item. Is it an nth item reference? The example page is just some development data but the first column shows the first summary item's excerpt. The default state will be hidden and only shown on hover. Any pointers on how I can target an individual summary block item with CSS? 

Thanks,

cvm

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply
2 hours ago, cvmdeveloper said:

Site URL: https://www.insidephilanthropy.com/mental-health-funding-guide-design

Hi everyone, I am trying to show a blog excerpt upon hovering over a summary item's title. I thought I would start by showing the excerpt for the summary item, and then figure out how to target it with CSS to hide it, and show it on hover. But I can't figure out how to target a particular summary item. Is it an nth item reference? The example page is just some development data but the first column shows the first summary item's excerpt. The default state will be hidden and only shown on hover. Any pointers on how I can target an individual summary block item with CSS? 

Thanks,

cvm

You follow this instruction

#block-yui_3_17_2_1_1620769958531_3513 .summary-item:nth-child(1) .summary-excerpt {
    transition: all 0.3s ease-out;
    overflow: hidden;
    max-height: 0;
}
#block-yui_3_17_2_1_1620769958531_3513 .summary-item:nth-child(1):hover .summary-excerpt {
  max-height: 500px;
}

whereas #block-yui_3_17_2_1_1620769958531_3513 is the unique id of the block, getting from this

Squarespace ID Finder - Chrome Web Store (google.com)

and the other nth-child(1) indicate the first item

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

This works great. Now I will style as a tooltip instead of expanding the space below to show the excerpt. I don't like to install Chrome extensions but this is going to be an exception because it saves so much time! Thank you for the example, it works perfectly! Cheers.

Link to comment
7 minutes ago, cvmdeveloper said:

This works great. Now I will style as a tooltip instead of expanding the space below to show the excerpt. I don't like to install Chrome extensions but this is going to be an exception because it saves so much time! Thank you for the example, it works perfectly! Cheers.

You can inspect the element to find the id instead

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.