Hover doesn't react

For visibility: hidden; hover does not work and it is a normal behavior.
I think in your case opacity would be better.

.delete-modal {
  ...
  opacity: 0;
}

.delete-modal:hover {
  ...
  opacity: 1;
}

you cant hover over something is not visible on your page, in that way your hover event is not fired at all,

instead place the hover on the parent, then do visibilty:visible on the desired element.

Related