html - Bootstrap modal inside container with styles associated on hover -

I have a bootstrap model inside a container on which the styles have been linked to hover. When the modal opens, the hover styles are applied like this, the modal was not open. Here's an example of this problem:

In my code I can not take the model out of the container because there are many containers, each with a unique model.

When the board is open, how can I prevent it from being applied to the hover style?

You can turn off the fact that when the model is & lt; Body & gt; Element has modal-open class

  body: no (.modal-open) # block_1: hover {background-color: red; }