Question

.item {
    width: 15px;
    height: 19px;
    padding: 4px 4px 0px 4px;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    -o-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    margin-bottom: 5px;
    overflow: hidden;
    color: #ffffff;
    background-color: #d62957;
    font-family: 'Source Sans Pro';
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    transition: all .6s linear;
}

.item:hover {
    width: 150px;
    background-color: #ffffff;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    transition: all .6s linear;
}

转换会导致菜单选项在悬停并改变颜色时增大;当div不再悬停并且过渡结束时，一些菜单选项（通常不是悬停在其中的菜单选项，但所有其余菜单选项）都会变成奇怪的亮紫色，而CSS中没有任何定义。

我只能在Safari（我的主浏览器）中重现这一点;我在Chrome和Firefox中测试了它，问题没有发生。

http://codepen.io/take_ninetynine/pen/RroXjP

以下是我看到的错误的屏幕截图：http://i.stack.imgur.com/TA9QQ.png

CSS动画结束时颜色闪烁

0 个答案: