css - CSS 3悬停问题

Question

我在侧边栏中有一个 div。整个 div 是一个链接，可将您带到网站的另一部分。

现在，在 div 的左侧有这个小花状图像，背景图像。当您将 div 悬停时，花应该

1. 旋转
2. 淡入淡出。

如果我在整个 div 上应用动画，则 div 将旋转，而不是背景图像。所以我这样解决它：花在一个绝对定位的 div 中，并且不断地旋转和淡入淡出（如果我将动画应用于 :hover 那么它只有在我直接悬停在图像上时才会旋转。）

Answer 1

这是你想要的吗？

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

但请注意，在某些浏览器中将伪选择器用于另一个伪选择器可能会出现一些问题，因此您可以执行以下操作：

HTML

<div id="foo">
    <div class="flower"></div>
</div>

CSS

#foo:hover > div.flower ...