Chrome的过渡错误在悬停

Question

如何修复Chrome transition对:hover的错误?部分:hover正常，然后不工作。也许我需要jQuery解决方案?

我举个例子，当transition:

.item {
    background: rgba(106, 204, 201, 1);
    background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
    background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
    width: 300px;
    height: 150px;
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.item:hover {
    opacity: 0.5;
    transition: opacity 1s;
}
.title {
    position: absolute;
    top: 20%;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translate(0, 0);
}
.item:hover .title {
    transform: translate(0, -20px);
    -webkit-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
}

<div class="item">
    <div class="title">title1</div>
</div>
<div class="item">
    <div class="title">title2</div>
</div>

Answer 1

试试这个:

.item {
    background: rgba(106, 204, 201, 1);
    background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
    background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
    width: 300px;
    height: 150px;
    display: inline-block;
    position: relative;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
    .item:hover {
        opacity: 0.5;
        transition: opacity 1s;
    }
.title {
    position: absolute;
    top: 20%;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
    .item:hover .title {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }

<div class="item">
    <div class="title">title1</div>
</div>
<div class="item">
    <div class="title">title2</div>
</div>

OS X 10.10.4和Windows 8.1的最新Chrome (Version 44.0.2403.130)未发现任何错误