Glyphicon and Text Simulatenous Color Change on Hover

Question

I am having difficulties achieving this with CSS techniques. Maybe I am missing something, but I thought to ask here before I look into Jquery options.

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

works to change the glyphicon color on hover.

.h2footer a:hover {
        color: white;
}

Works to change the text element color below it on hover.

But I am trying to achieve to whereas if you hover over the glyphicon the color of the glyphicon AND the text below it both change color.

Meaning, per the example below, if you hover over the forms glyphicon, that changes color, but so does the text below it that says 'Forms'.

https://jsfiddle.net/534gynwv/

This link may help: http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered — sbswim, May 06 '16 at 22:28

score 2 · Accepted Answer · answered May 06 '16 at 22:30

2

Why not:

<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>

And:

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

answered May 06 '16 at 22:30

jbrya029

492
3
11

but this will apply hovering effects also outside icon and text. when hover in any area in double-highlight div – Shady Alset May 06 '16 at 22:36
Yes. And a potential solution around that would be to wrap both elements in your `` tag and give it the class double-highlight. – jbrya029 May 06 '16 at 22:43
Wow very good. Wasn't expecting a one-line solution. But what do you mean by 'give it to the class double-highlight'? I've done this `

Contact
` but it still highlighting outside?
– bbruman May 06 '16 at 22:51
I mean `a href="#" class="double-highlight"` still highlights everything if the div has the class of double-highlight – bbruman May 06 '16 at 23:05
1

I'm not sure what you mean? See updated html/css: https://jsfiddle.net/534gynwv/1/ – jbrya029 May 06 '16 at 23:10
That works. Perfect. Thank you. For some reason it was not working for me on my live site... I believe I had some extra
's that shouldn't of been there or something. All good though!
– bbruman May 07 '16 at 04:47

Glyphicon and Text Simulatenous Color Change on Hover

1 Answers1

Contact