當鼠標懸停在另一個元素上時，如何改變元素的顏色?

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

本文翻译自 Xerunix 查看原文 2015-10-20 1565 css/ html

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

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:

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

#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

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

注意！

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

How to change one element while hovering over another How to scroll up a div when hovering over another element Why does the

element not change color and width when I hover the mouse over it after hovering over the image? In Video.js, where can I change the big play button color when the mouse is hovering over the video? Set Pointer to Hand when hovering over UI element in Silverlight How do I change the color of a HTML element, when user taps on it? Detect IF hovering over element with jQuery How to change element style color How to remove underline when hovering over an image in IE? How can a hover-over element still change other element styles when they're all in separate divs?