0

我需要在父元素的“悬停”动作上为两个元素设置动画。

JS小提琴是：这里

我在这里包含了相同的代码：

这是我的HTML代码：

<div class="dealList"><a href="#" title="View Deal" class="viewDeal"><span>&nbsp;</span>View</a></div>

而CSS3是

-webkit-animation-name: expand;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: 1;    -webkit-animation-timing-function: linear;    -moz-animation-name: expand;     -moz-animation-duration: 1s;     -moz-animation-iteration-count: 1;    -moz-animation-timing-function: linear;}.dealList .viewDeal span{    display: inline-block;    width: 14px;    height: 14px;    background: url(../images/star_view.png) no-repeat;    -webkit-transition-property: -webkit-transform;    -webkit-transition-duration: 1s;    -moz-transition-property: -moz-transform;    -moz-transition-duration: 1s;}.dealList .viewDeal:hover span{    -webkit-animation-name: rotate;     -webkit-animation-duration: 2s;     -webkit-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;    -moz-animation-name: rotate;    -moz-animation-duration: 2s;    -moz-animation-iteration-count: infinite;    -moz-animation-timing-function: linear;}@-webkit-keyframes rotate {    from {-webkit-transform: rotate(0deg);}    to {-webkit-transform: rotate(-360deg);}}@-moz-keyframes rotate {    from {-moz-transform: rotate(0deg);}    to {-moz-transform: rotate(360deg);}}@-webkit-keyframes expand {    from {width: 14px;}    to {width: 80px;}}@-moz-keyframes expand {    from {width: 14px;}    to {width: 80px;}}

我需要星星旋转，“视图”应该会出现。一旦宽度达到最大限制，它应该保持不变并且星星应该停止旋转。

请帮我解决这个问题。

4

1 回答 1

0

将您的显示属性更改为inline-block.

.dealList .viewDeal{
    display: inline-block; 
    ...

这是小提琴：http: //jsfiddle.net/qrmWA/1/

于 2013-04-02T09:10:44.143 回答