Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular 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

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; } #bloc

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 save

3 answers to this question

Recommended Posts

  • 0
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

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
If 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 post
  • 0

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 post
  • 0
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

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
If 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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...