Question

所以我有这个css3动画设置应该用0px，47px到170px，47px的类“标签”缩放div当你将鼠标悬停在div“house”上时除了它不起作用，我不知道为什么。

<style type="text/css">
@keyframes labels {
    0% {width:0px; height:47px}
    100% {width: 170px; height:47px}
}
.hover{
}
.hover:hover{
    background-size: contain;
    transition: 0.5s ease-in-out;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    cursor:pointer;
}
#house{
    width: 4em;
    height: 4em;
    padding: 2em;
    background-color: #069;
    border: thick solid #FC0;
    color: #09C;
    text-decoration: underline overline;
    position: absolute;
    top: 4em;
    left: 4em;
}
.label{
    position: absolute;
    width: 0px;
    height: 47px;
    background-image: url(tests-02.png);
    background-repeat: no-repeat;
    top: 5em;
    left: 47px;
    background-size: 100%;
}
#house:hover .label{
    animation:labels;
    -webkit-animation:labels;
}
</style>
</head>
<body>
<div id="house" class="hover">TEST</div>
<div class="label"></div>
</body>

图片无法加载，因为它是本地的所以我用“黑色背景”填充“标签”而不是jsfiddle

http://jsfiddle.net/YFRHR/

Answer 1

您的问题标题具有误导性。你有两个问题：

1）动画语法，缺少属性

.hover:hover + .label{
animation: labels 1s infinite;
-webkit-animation: wlabels 1s infinite;
}

2）缺少webkit支持：

@-webkit-keyframes wlabels {
    0% {width:0px; height:47px}
    100% {width: 170px; height:47px}
}
@-keyframes labels {
    0% {width:0px; height:47px}
    100% {width: 170px; height:47px}
}

但悬停本身正在发挥作用。

update fiddle

如何使用悬停在另一个div上进行css3中的div动画？

1 个答案: