0
我有一个div容器，当我将鼠标悬停在此容器上时，通过将第二个div的不透明度从0更改为1，我在我的容器上显示另一个div。我点击第二个div（当我的容器悬停时出现），我正在做一个动画。我面临的问题是，当动画开始并且同时如果将鼠标指针从我的容器中移开时，动画也会消失而不会完成动画。我如何保持动画，直到它完成，如果我点击它后将鼠标指针从容器移开。即使在悬停状态不变时也保持转换
我的容器
<div key={index} className='vote_img_div active_imgvote_border'>
<div className="vote_img unchange_div">
//contents
</div>
<div onClick={() => this.handleClick(content.post_poll_content_id)}
className={((this.state.voted_id === content.post_poll_content_id && this.state.active) ? 'vote_card_hover active' : 'vote_card_hover')}>
</div>
</div>
我的CSS
.vote_img_div {
width: 292.5px;
display: inline-block;
margin-left: 8.25px;
margin-bottom: 5px;
overflow: hidden;
position: relative;
background-color: whitesmoke;
transition: all .2s ease-in-out;
}
.vote_img {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
.vote_card_hover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
opacity: 0;
transition: .3s ease;
background: rgba(0, 0, 0, .70);
}
.vote_card_hover:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 500px;
height: 500px;
background: rgba(0, 111, 147, 0.70);
transition: transform 0.8s ease;
border-radius: 50%;
}
.vote_card_hover.active:before {
transform: translate(-50%, -50%) scale(1);
}
.vote_img_div:hover .vote_card_hover {
opacity: 1;
cursor: pointer;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
}
.active {
background: rgba(103, 173, 237, 0.7);
color: #FFFFFF;
}
[可能的复制（https://stackoverflow.com/questions/7694323/css3-animation-on-hover-force-entire-animation） – cometguy
可能的复制[css3 animation on：hover;强制整个动画]（https://stackoverflow.com/questions/7694323/css3-animation-on-hover-force-entire-animation） – cometguy