Hide block properties when block is collapsed

Customization
18

I got lucky and managed to get what I needed:

/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
/* Now the properties' tags can be clicked too */
.block-properties {
  display: none;
  position: absolute;
  transform: translate(0%, -10%); /* Move the properties horizontally aligned with the ".block-content-inner" DIV Left Margin */
  border-radius: 5px;
  padding: 10px;
  border: 1px solid var(--ls-secondary-border-color); /* Add custom border color from pre-defied variables */
  background: var(--ls-primary-background-color)
}
/* Show block properties on hovering .block-content-inner */
.block-content-inner:hover ~ .block-properties {
  display: block;
  opacity: 1;
  z-index: 999;
}
/* Keep Showing block properties on hovering .block-properties */
.block-properties:hover {
  display: block;
  opacity: 1;
  z-index: 999;
}

.block-properties {
  display: none;
}

I basically moved up the properties DIV ( transform: translate(0%, -10%) ) so there is no gap between the heading of the block and itself and made it so that the div display is of type block when hovering it. I also added a .block-properties:hover CSS rule to make the priperties DIV stay ontop while hovering the mouse over it.

This way, the content of the block doesn’t slide down when the properties DIV show up and I can hover the block heading to reveal the properties and I can also move my mouse over the properties without it disappearing so now I can click any links / tags inside the properties while the properties disappear once I exit the header or properties areas.

I am super happy about this, thanks @razcore-rad for driving this forward :partying_face: as I really believed it can’t be done and left it behind…

2 Likes