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

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

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

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.

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