Question

如何修复transition上Chrome :hover中的错误？有些:hover通常，然后不起作用。也许我需要jQuery解决方案？

我举一个例子，transition：

是否存在这样的错误

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 1

尝试this：

＆＃13;

.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);
    }

＆＃13;

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

＆＃13;

请勿在OS X 10.10.4和Windows 8.1上看到最新Chrome（版本44.0.2403.130 ）中的任何错误。

悬停时的Chrome转换错误

1 个答案: