当鼠标悬停在另一个元素上时,如何改变元素的颜色?

[英]How to change color of element when hovering over another element?


I am trying to make a button that has a white background and an orange icon when not being hovered and has an orange background and a white icon when hovered over. The behavior is very similar to the behavior seen when scrolling over one of the glyphicons found here. http://getbootstrap.com/components/

我正在尝试做一个按钮,当没有悬空的时候有一个白色的背景和一个橙色的图标,当悬空的时候有一个橙色的背景和一个白色的图标。这种行为非常类似于在滚动一个字形图标时看到的行为。http://getbootstrap.com/components/

The two problems I am encountering is that the text is highlighted blue when scrolled over and that I can only change the background to orange and not the icon color at the same time. The icon is a glyphicon. Does anyone know how to accomplish what I am trying to do?

我遇到的两个问题是,滚动时文本被突出显示为蓝色,我只能将背景更改为橙色,而不能同时更改图标颜色。图标是一个符号。有人知道我要做什么吗?

This is the block of html I am working with.

这是我正在使用的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>

and the corresponding css

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

3 个解决方案

#1


3  

Here, you just need a hover and to set the color in the CSS.

在这里,您只需要一个鼠标悬停并在CSS中设置颜色。

fiddle: https://jsfiddle.net/heh66yc8/

小提琴:https://jsfiddle.net/heh66yc8/

HTML:

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

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

#2


2  

Try this

试试这个

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

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

#3


0  

Here is the fix. This is is better. No line under the text on hover. View it working here: http://jsfiddle.net/agfcontact/4eb0u9v4/35/

这是修复。这是更好。鼠标悬停时,文本下方没有线。查看这里的工作: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;
}
智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2015/10/20/7201a82d93bfe245c459fa0a1a13c79.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告