如何在css3中使用悬停在另一个div上发生div动画？

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

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

来源

2013-06-11 Tom B

你的问题的标题有误导之嫌装“标签”，背景为黑色。你2个问题：

1）动画语法，有缺失的WebKit支持缺少的属性

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

2）：

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

来源

2013-06-11 16:54:13 vals

哦，对不起，我不知道那些遗漏的属性。这很好用，但我怎样才能让它每循环一次循环？ –

好的，所以我用1替换了无限，但是一旦它回到原来的0px宽模式，它就会播放。我将如何获得它保持170px，直到悬停结束？ –

没关系，明白了。谢谢您的帮助。 –

如何在css3中使用悬停在另一个div上发生div动画？

回答

相关问题