Событие hover на активном элементе

Не могу понять в чем проблема.

Делаю 3d анимацию, и мне нужно использовать hover, но он не срабатывает в нужном месте.

Если я оставляю код вот так: (то что выделено):

   .main.active .container {
        animation: main-animation 1s ease-out;
        pointer-events: none;
        transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
    }

   .main.active .content:hover {
        border: 1px solid #fff;
    }

То hover не срабатывает.

Когда просто оставляю:

.main.active .container:hover {
    animation: main-animation 1s ease-out;
    pointer-events: none;
    transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}

То hover работает. Ещё когда hover запускаешь вот так:

.main.active .container {
    animation: main-animation 1s ease-out;
    pointer-events: none;
    transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}

.main content:hover {
    border: 1px solid #fff;
}

То есть второй main без .active, тогда hover срабатывает.

Как исправить????