javascript - 将鼠标悬停在文本上时图像旋转

Question

对，我有一个带有文本的 div，当我将鼠标悬停在文本上时，它会变成红色并且左边距为 4px，它旁边还有一个星星的图像，我想要实现的是当文本悬停在星形旋转时，它仍然会变成红色并且有 4px 的边距，有什么想法吗？

Answer 1

小提琴：http: //jsfiddle.net/vPAcF/

CSS：

span.red:hover {
    color:#C42626;
    -webkit-transition:color 0.5s ease-in;
    -moz-transition:color 0.5s ease-in;
    -o-transition:color 0.5s ease-in;
    transition:color 0.5s ease-in;
}
span.red:hover .star {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -0-transform: rotate(45deg);
    transform: rotate(45deg);
}
.star {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transform: rotate(0deg);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.star:hover {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
span.red {
    color:#CCC;
    -webkit-transition:color 0.5s ease-in;
    -moz-transition:color 0.5s ease-in;
    -o-transition:color 0.5s ease-in;
    transition:color 0.5s ease-in;
}