使用.hover以及.active用于css动画

Question

我有一个名为main的div，在这个div里面是另一个名为slideup的div。使用CSS动画，当您将鼠标悬停在主内容div上时，向上滑动div会从底部向上滑动至50％高度。这可以在我下面的css代码中看到

.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
}
.maincontentdiv:active > .slideup, .maincontentdiv:hover > .slideup { 
min-height: 50%;
}

悬停效果非常好，但是我为触摸屏设备添加了点击功能（.active）。我似乎无法使点击功能起作用。有人可以告诉我我做错了吗？

由于