How to change the color of an element when hovering over another element?

Question

I am trying to make a button that has a white background and an orange icon when it does not hang, and has an orange background and a white icon when it hangs. The behavior is very similar to the behavior observed when scrolling over one of the glyphics found here. http://getbootstrap.com/components/

The two problems I am facing are that the text is highlighted in blue when scrolling and that I can only change the background to orange, and not to the color of the icon at the same time. The icon is a glyphicon. Does anyone know how to accomplish what I'm trying to do?

This is the html block I'm working with.

  <div class="col-xs-4">
        <a href="/pace">
            <div class="calc-btn">
                <span class="glyphicon glyphicon-time" style="font-size:100px;"></span>
                <span class="text-under-gylphicon">Pace</span>
            </div>
        </a>
    </div>

and corresponding css

.text-under-gylphicon{
    display: block;
}

.calc-btn, .calc-btn a{
    margin: 10px 0;
    padding: 10px;
    font-size: 33px;
    line-height: 1.4;
    text-align: center;
    background-color: #f9f9f9;
    list-style-type: none;
    list-style-position: outside;
    border: 1px solid #fff;
    text-decoration: none;
}

.calc-btn:hover {
    background-color: #EF5E2F;
    text-decoration: none;
}   

.calc-btn:hover::after {
    color: #FFFFFF;
}

Answer 1

CSS.

: https://jsfiddle.net/heh66yc8/

HTML:

<div class="col-xs-4">
        <a href="/pace">
            <div class="calc-btn">
                <span class="glyphicon glyphicon-time glyph"></span>
                <span class="text-under-gylphicon">Pace</span>
            </div>
        </a>
    </div>

CSS

.text-under-gylphicon{
    display: block;
}

.calc-btn, .calc-btn a{
    margin: 10px 0;
    padding: 10px;
    font-size: 33px;
    line-height: 1.4;
    text-align: center;
    background-color: #f9f9f9;
    list-style-type: none;
    list-style-position: outside;
    border: 1px solid #fff;
    text-decoration: none;
}

.glyph
{
    color:#EF5E2F;
    font-size:100px;
}

.calc-btn:hover {
    background-color: #EF5E2F;
    text-decoration: none;
}

.calc-btn:hover .glyph {
    color: #fff;
}  

Answer 2

.calc-btn a{
text-decoration:none;
color:inherit;
}
.calc-btn{
color:orange;
background-color:#fff;
}

.calc-btn:hover{
color:#fff;
background-color:orange;
}

Answer 3

Here is the fix. It is better. No line is entered under the text. See how it works here: http://jsfiddle.net/agfcontact/4eb0u9v4/35/

.text-under-gylphicon{
    display: block;
}

.calc-btn{
    margin: 10px 0;
    padding: 10px;
    font-size: 33px;
    line-height: 1.4;
    text-align: center;
    background-color: #f9f9f9;
    list-style-type: none;
    list-style-position: outside;
    border: 1px solid #fff;
    text-decoration: none;
    color: #999;
}

.calc-btn:hover {
    background-color: #EF5E2F;
    text-decoration: none;
    color: #FFFFFF;
}   

.col-xs-4 a:hover{
    text-decoration:none;
}