Question

Fiddle - 我正在为页面的右上角创建一个小按钮，该按钮最初有一个动画，可以在一段时间后隐藏它。在这个动画之后，按钮应该能够在div悬停时移动，但是当前：hover事件不起作用。这是我的CSS代码：

.siteTagArea {
    width: 80px;
    height: 40px;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 9;
}

.siteTag {
    width: 60px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: center;
    border-radius: 3px;
    line-height: 20px;
    font-size: 10px;
    text-transform: uppercase;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    z-index: 10;
    -webkit-transition: 0.2s;
    -webkit-animation: moveup 2s 1;
    -webkit-animation-delay: 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes moveup {
    from {top: 10px;}
    to {top: -22px;}
}

.siteTagArea:hover + .sazookTag {
    top: 10px;
}

.siteTag:hover {
    top: 10px;
}

我该如何修复这个错误？

Answer 1

动画正在弄乱它所以如果你改变动画让它恢复原状它似乎有用 http://jsfiddle.net/66vd5g3b/4/

 @-webkit-keyframes movedown {
        from {top: -22px;}
        to {top: 10px;}
}

.siteTagArea:hover + .siteTag {
        -webkit-animation: movedown 2s 1;
}

CSS过渡和动画问题

1 个答案: