CSS 3悬停问题
CSS 3悬停问题
提问于 2013-05-04 08:41:58
我在侧边栏上有个div。整个div是一个链接，带您到网站的另一部分。
现在，在div的左边有一个类似花的小图像，背景图像。当你悬停的时候，花应该
- 旋转
- 渐入渐退。
如果我在整个div上应用动画，div将旋转，而不是背景图像。因此，我这样解决了它:花处于绝对位置的div中，并连续地旋转和消退(如果我将动画应用于:悬浮，那么只有当我在图像上直接悬停时，它才会旋转)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-05-04 08:54:44
这是你想要的吗？
http://jsfiddle.net/kgFdJ/2/
#foo {
width: 300px;
height: 500px;
background-color: #eee;
position: relative;
}
#foo:after {
content: "";
width: 20px;
height: 20px;
background-color: #f00;
position: absolute;
top: 10px;
left: 10px;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s
}
#foo:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}但是，请注意，使用伪选择器对另一个伪选择器在某些浏览器中可能会有一些错误，因此您可以这样做：
<div id="foo">
<div class="flower"></div>
</div>CSS
#foo:hover > div.flower ...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16372351
复制相关文章
相似问题
腾讯云开发者
