这个问题是新手，但我被困在这个东西。我希望有人能帮助我。
我有这样的代码：
于飞：

<div class='zone11'>
    <div class='book11'>    
        <div class='cover11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='last-page11'></div>
        <div class='back-cover11'></div>
    </div>
</div>

CSS：

.zone11{
   height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.book11{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.book11:hover .cover11{
    transform: rotateX(10deg) rotateY(-180deg);
}

.book11:hover .page11{
    transform: rotateX(10deg) rotateY(-180deg);
    z-index: 2;
}

.cover11{
    z-index: 1;
    transition: all 3.5s;
}

.back-cover11{
    z-index: -3;
}

.cover11, .back-cover11{
    height: 450px;
    width: 360px;
    background: #3f0035;
    border-radius: 2px 20px 20px 2px;
    position: absolute;
    box-shadow: 1px 1px 10px gray;
    transform: rotateX(10deg);
    transform-origin: center left;
}

.page11{
    height: 430px;
    width: 350px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform: rotateX(10deg);
    transform-origin: center left;
    z-index: -1;
}

.last-page11{
   height: 430px;
    width: 350px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform: rotateX(10deg);
    transform-origin: center left;
    z-index: -2;
}

.page11:nth-child(2){
    transition-duration: 3s;
}
.page11:nth-child(3){
    transition-duration: 2.6s;
}
.page11:nth-child(4){
    transition-duration: 2.2s;
}
.page11:nth-child(5){
    transition-duration: 1.8s;
}
.page11:nth-child(6){
    transition-duration: 1.4s;
}

.book11:hover .page11:nth-child(2){
    transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
    transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
    transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
    transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
    transition-duration: 4.4s;
}

现在，我有一本书的动画，当你悬停时，它打开到一页（在你到达之前有5页滚动）。我想删除悬停，并确保它打开和关闭点击。
我从类中删除了悬停。例如封面：

.cover11__open{
    transform: rotateX(10deg) rotateY(-180deg);
}

然后在javascript中：

var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
    cover11.classList.toggle('cover11__open');
});

后一种方法在其他情况下有效，但在这里不起作用。我也试过在网上找到的其他方法，但没有任何效果。谢谢。