将鼠标悬停在另一个元素上时如何更改元素的颜色？

100

Xerunix

我正在尝试创建一个按钮，该按钮在不悬停时具有白色背景和橙色图标，在悬停时具有橙色背景和白色图标。该行为与在此处找到的一个字形上滚动时看到的行为非常相似。http://getbootstrap.com/components/

我遇到的两个问题是滚动时文本突出显示为蓝色，并且我只能同时将背景更改为橙色，而不能同时更改图标颜色。图标是一个字形图标。有人知道我该怎么做吗？

这是我正在使用的html块。

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

和相应的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;
}

杰西

在这里，您只需悬停并在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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。