悬停时的Glyphicon和Text Simulatenous颜色变化

时间:2016-05-06 22:09:42

标签: css hover glyphicons

我很难通过CSS技术实现这一目标。 也许我错过了一些东西,但在考虑Jquery选项之前我想过在这里问。

.glyphicon:hover {
        color: rgba(255, 255, 255, 0.60);
}

用于在悬停时更改glyphicon颜色。

.h2footer a:hover {
        color: white;
}

用于在悬停时更改其下方的文本元素颜色。

但是我想要实现,而如果你将鼠标悬停在glyphicon上,那么glyphicon的颜色和它下面的文字都会改变颜色。

根据下面的示例,如果将鼠标悬停在可以改变颜色的表单glyphicon上,则表示' Forms'

下面的文本也是如此。

https://jsfiddle.net/534gynwv/

1 个答案:

答案 0 :(得分:2)

为什么不:

<div class="col-md-4 double-highlight">
    <a href="#"><i class="glyphicon glyphicon-calendar marketing"></i></a>
    <h2 class="h2footer"><a href="#">Schedule an<br> Appointment</a></h2>
    <p></p>
</div>

.double-highlight:hover .glyphicon, .double-highlight:hover .h2footer a{ color:white; }