0

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

<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/

4

1 回答 1

0

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

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}
}

但是悬停本身是有效的。

更新小提琴

于 2013-06-11T16:54:13.187 回答