3
我在侧栏中有一个div。整个div是一个链接,将您带到网站的另一部分。CSS 3悬停问题
现在,在div的左侧有背景图像这样的小花朵。当您将鼠标悬停在div花应该
- 旋转进出
- 褪色。
如果我在整个div上应用动画,div将旋转,而不是背景图像。所以我解决了这个问题:花是在一个绝对定位的div,并旋转和淡入和淡出不断(如果我将动画应用于:悬停,那么只有当我直接悬停在图像上时它才会旋转)。
我在侧栏中有一个div。整个div是一个链接,将您带到网站的另一部分。CSS 3悬停问题
现在,在div的左侧有背景图像这样的小花朵。当您将鼠标悬停在div花应该
如果我在整个div上应用动画,div将旋转,而不是背景图像。所以我解决了这个问题:花是在一个绝对定位的div,并旋转和淡入和淡出不断(如果我将动画应用于:悬停,那么只有当我直接悬停在图像上时它才会旋转)。
这是你想要的吗?
#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)
}
但要知道,使用伪选择另一个伪选择可以得到在某些浏览器一个小马车,因此,你可以做这样的事情:
HTML
<div id="foo">
<div class="flower"></div>
</div>
CSS
#foo:hover > div.flower ...
谢谢这个答案是有帮助的,但我必须仍然修改它,因为我想 – 2013-05-04 17:22:38
一些代码,或图片将是很好,所以我们可以更好地理解这个问题 – samayo 2013-05-04 09:00:47
PHP风扇是正确的,你需要改善这个问题。 – coma 2013-05-04 09:03:06
是我的回答有用吗? – coma 2013-05-04 12:46:58