如何在css3中使用悬停在另一个div上的方式制作div动画？_Css_Html_Hover_Transform

如何在css3中使用悬停在另一个div上的方式制作div动画？

css html

如何在css3中使用悬停在另一个div上的方式制作div动画？,css,html,hover,transform,Css,Html,Hover,Transform,所以我设置了这个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-

所以我设置了这个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>


@关键帧标签{
0%{宽度：0px；高度：47px}
100%{宽度：170px；高度：47px}
}
.悬停{
}
.悬停{
背景尺寸：包含；
过渡：0.5s缓进缓出；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
光标：指针；
}
#房子{
宽度：4em；
高度：4em；
填料：2米；
背景色：#069；
边框：厚实线#FC0；
颜色：#09C；
文字装饰：下划线上划线；
位置：绝对位置；
顶部：4em；
左：4em；
}
.标签{
位置：绝对位置；
宽度：0px；
高度：47px；
背景图片：url（tests-02.png）；
背景重复：无重复；
顶部：5em；
左：47px；
背景大小：100%；
}
#豪斯：悬停。标签{
动画：标签；
-webkit动画：标签；
}
试验

图片不会加载，因为它是本地的，所以我在JSFIDLE中用黑色背景填充了“标签”

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

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

但悬停本身是有效的

哦，对不起，我不知道那些丢失的房产。这很好，但是我怎么才能让它每次悬停只循环一次呢？好的，所以我用1代替了无限，但在它播放后，它会回到原来的0px宽模式。我怎样才能让它保持170px直到悬停结束？你没有给我时间回答！