html - CSS Transition speed on off hover, flip pane 的透明度很奇怪？

Question

我有几个 div 元素，我想在悬停时翻转它们。我不确定如何做的几件事是:

1. 更改悬停时的翻转速度(不再悬停时)。我能够将悬停时的翻转速度更改为 0.5 秒的持续时间，但如何更改悬停时的悬停速度？

2. 可翻转 Pane 的正面和背面具有背景色。为什么它被视为透明/玻璃背景，您可以在其中看到正面的反面？当我应该只能看到背面时，我不想看到镜像的正面 + 背面。

有什么建议吗？

编辑；如果没有出现透明度问题，这是我所看到的图像。

所需的显示是一个带有“ipsum”和“something”的纯色面板。它不应该显示正面的镜像。

.flip_container {
    position: relative;
    margin: 10px auto;
    width: 270px;
    height: 200px;
    z-index: 1;
}
.flip_container {
    perspective: 1000;
}
.flip_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
.flip_container:hover .flip_card {
    transform: rotateY(180deg);
    transition-duration: 0.5s;
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    font-family: tahoma, sans-serif;
    text-align: center;
}
.face.front {
    font-weight: bold;
    font-size: 13pt;
    color: white;
}
.face.back {
    display: block;
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
}
.imagebox {
    width: 260px;
    height: 160px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
}
.imagebox img {
    width: 250px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
}
.flip_card.purpleline {
    background-color: #BAADBA;
}
.flip_card.blueline {
    background-color: #ADB3BA;
}
.smaller {
    font-size: 11pt;
}

<div class="flip_container">
    <div class="flip_card purpleline">
        <div class="front face">
            <div class="imagebox">
                <img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg" />
            </div>
            cat
        </div>
        <div class="back face">
            ipsum
            <br/><br/>
            <span class="smaller">
                sometext
            </span>
        </div>
    </div>
</div>
<div class="flip_container">
    <div class="flip_card blueline">
        <div class="front face">
            <div class="imagebox">
                <img src="http://animalia-life.com/data_images/dog/dog7.jpg" />
            </div>
            dog
        </div>
        <div class="back face">
            lorem
            <br/><br/>
            <span class="smaller">
                sometext
            </span>
        </div>
    </div>
</div>

Answer 1

CSS 不支持 :mousein 或 :mouseout。

您可以使用 :hover 来添加 :mousein 属性，通常没有悬停的默认类应该具有您的 :mouseout 属性

否则你总是有 JS 来做这个把戏。

$('#element').hover(function(e){
    if(e.type==='mouseenter' || e.type==='mouseover'){
        //your :mousein code
    }else if(e.type==='mouseleave'){
        //your :mouseout code
    }
});

希望这能回答您的问题。