1

我有html：

<div class="social-section">
    <a href="#" class="glyphicons facebook"><i></i></a>
    <a href="#" class="glyphicons twitter"><i></i></a>
</div>

当鼠标悬停时，我希望使用 CSS3 过渡让图标淡化为不同的颜色。不幸的是，如果可能的话，我不确定如何进行这项工作。我目前对 css 的尝试是：

.social-section * i:before { /* Apply this to the i:before, when the a is hovered */
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.social-section a i:before {
    color: red;
}

.social-section a:hover i:before {
    color: black;
}

如果这有帮助，这里是 Glyphicons 字体 css 代码的相关部分：

.glyphicons {
    display: inline-block;
    position: relative;
    padding: 0 0 5px 35px;
    *display: inline;
    *zoom: 1;
}
.glyphicons i:before {
    position: absolute;
    left: 0;
    top: 0;
    font: 20px/1em 'Glyphicons';
    font-style: normal;
    color: red;
}
4

2 回答 2

2

一个伪代码，因为我不确定它应该如何根据您的问题行事......

将您拥有的过渡 css 代码放在您想要影响的元素中（即不是父元素）

#child {
   // transitions....
}

然后做

 #parent:hover #child {
   // your changes
}

当父元素悬停时，对子元素进行更改。孩子现有的过渡效果将用于此，我认为这是您的目标。

此外，如果您要在图标之间转换，则需要更改精灵图像的位置，我假设您正在使用它，而不是更改color样式。

于 2012-12-25T23:34:12.643 回答
0

答案是伪元素不能在大多数浏览器的大多数版本上进行转换。这个问题非常令人沮丧，以至于 Chris Coyier（css-tricks.com 的）在当前状态下保持打开页面。

截至撰写本文时，伪元素的转换受以下支持：

  • 火狐 4.0+
  • 铬 26+
  • IE 10+

您可以在浏览器上确认这一点。

于 2013-01-07T09:44:10.213 回答