当前位置: 动力学知识库 > 问答 > 编程问答 >

css3 - Simultaneous CSS transition on link and its child span

问题描述:

I'm trying to have a css transition take place on a link upon hover. The text of the link should change color as well as a child span's color. It's happening except the span transition appears to start only when the first transition completed. Any ideas?

<div class="transition">

<a href="#">

Click here

<span class="glyphicon glyphicon-play pull-right"></span>

</a>

</div>

.transition a,

.transition span {

-webkit-transition:color .2s linear;

-moz-transition: color .2s linear;

-o-transition: color .2s linear;

transition: color .2s linear;

}

I tried separating the classes into two which made no difference.

EXAMPLE: JSFIDDLE

网友答案:

The transition will cause the color to change for its children, so they will begin the transition again and again. Try to not transition inside a transition with the same property. If you want the color of the span to change with the parent, use color: inherit; without transition on the span.

网友答案:

Just a fiddle as an example: JSFIDDLE

.transition a       {
-webkit-transition:color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: