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

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

本文翻译自 Xerunix 查看原文 2015-10-20 1543 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。

當鼠標懸停在另一個元素上時如何向上滾動div - 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? 當鼠標懸停在列表上時，改變列表中每個鏈接的顏色 - change the color of a every link in a list when hovering over one JS / jQuery：當將鼠標懸停在另一個（較低的）LI元素上時，如何選擇UL導航的第一個LI項？ - JS/jQuery: How can I select the first LI item of an UL navigation when hovering over another (lower) LI element? 將鼠標懸停在列表上時如何更改HTML鏈接的顏色？ - How to alter the color of an HTML link when hovering over a list? 將鼠標懸停在元素上時停止功能 - Make function stop when hovering over an element 如何在使用AngularJS將鼠標懸停在另一個div上時更改一個div上的類？ - How to change the class on one div while hovering over another div with AngularJS? 在Video.js中，當鼠標懸停在視頻上時，我可以在哪里更改大播放按鈕顏色？ - In Video.js, where can I change the big play button color when the mouse is hovering over the video? WPF - 將鼠標懸停在一個元素上可顯示另一個元素中的內容 - WPF - Hovering over one Element shows content in another Element 當鼠標懸停在css3上時，如何使圖像顯示在另一個圖像上？ - How to make an image appear over another image when mouse hovers with css3?