Is it possible to add additional custom logic such as css or js hover effect when selecting components from a dynamic zone?

Questions and Answers
1
System Information
  • Strapi Version - 4.16.2:
  • Operating System - MacOS 14.5:
  • Node Version - v18.18.1:
  • NPM Version - 10.1.0:

When creating content by the manager, if the components were added to the dynamic zone, the “Add a component to blocks” button appears where we have a choice of reusables or singles components that look like this (screen №1)

Screenshot 2024-10-15 at 4.46.17 PM
Screenshot 2024-10-15 at 4.46.17 PM1352×1410 98.1 KB

Here is an example of the config of one of the components:

cms/src/components/singles/description.json

{
  "collectionName": "components_singles_description_s",
  "info": {
    "displayName": "Block \"Description\"",
    "description": ""
  },
  "options": {},
  "attributes": {
    "description": {
      "type": "text"
    },
    "preview": {
      "type": "customField",
      "options": {
        "componentName": "ComponentSinglesDescription"
      },
      "customField": "plugin::preview-button.preview"
    }
  }
}

The most I could find in terms of customization was the ability to add icon.
I would like to add JS hover effect when hovering over a block so that I can show e.g a preview of how this block gonna look like. Is this even possible?