Question

我有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;
}

Answer 1

伪代码，因为我不确定它应该根据你的问题采取行动......

将您想要影响的元素中的转换css代码（即不是父元素）

#child {
   // transitions....
}

然后做

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

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

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

Answer 2

答案是伪元素无法在大多数浏览器的大多数版本上进行转换。这个问题非常令人沮丧，因为Chris Coyier（css-tricks.com）对目前的状态是keeping a page open。

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

Firefox 4.0 +
Chrome 26 +
IE 10 +

您可以在浏览器上confirm this。

如何在父元素悬停时将css转换应用于元素？

2 个答案: