懸停時的目標文字顏色

Question

我做了一個css按鈕，但是當我將鼠標懸停在按鈕上時，我無法弄清楚如何將文本顏色更改爲白色。

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 

 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

當我增添色彩

a.button1o:hover 

這是行不通的。

我也試過：

• a.button1o文本：懸停

Answer 1

那是因爲你所申請的a顏色不是span試試這個

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    color: #f44336; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

在上面的代碼中我加入color:#fff到a.button1o:hover，也是我加入#f44336到.button1o

另一種方法是這樣的

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
a.button1o:hover span { 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

Answer 2

您可以在父元素上使用的:hover選擇：

a.button1o:hover .button1o-text { 
    color: white; 
} 

你也應該把transition屬性在您的第一個聲明中，否則當用戶停在按鈕上方時，您將失去轉換。

.button1o { 
    background-color: transparent; 
    padding: 10px 15px; 
    margin-right: 15px; 
    border: 2px solid #f44336; 
    border-radius: 2px; 
    transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover { 
    background-color: #f44336; 
} 
a.button1o:hover .button1o-text { 
    color: white; 
} 

.button1o-text { 
    font-size: .7em; 
    font-family: 'PT Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0; 
    color: #f44336; 
} 

Answer 3

你有兩個選擇。更簡潔的選項是將color: #f44336規則移出.button1o-text和.button1o，這將允許當前懸停規則覆蓋顏色。 （？有你有所有不同的CSS規則跨度的理由）

另一種選擇是加入這個懸停規則上色文本：

.button1o:hover .button1o-text { 
    color: [hover color]; 
} 

Answer 4

需要懸停屬性添加到跨度元素。那就是：

a.button1o>span:hover { 
    color:white; 
} 

這裏是問題的你的工作代碼

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
     color:white; 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 
a.button1o>span:hover { 
 
     color:white; 
 
    } 
 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

Answer 5

檢查這個fiddle。

CODE

這應該工作，你想要的，告訴我，如果是這樣，謝謝。

a.button1o:hover{ 
background-color: #f44336; 
transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover .button1o-text{ 
color: #fff; 
transition: all 0.9s ease 0.1s; 
} 

Answer 6

你不需要跨度類=「button1o文本... 只需設置融入button1o類，並添加顏色：白色的a.button1o：懸停類

<a class="button1o" href="" target="_blank">Flat button</a> 

您可能需要添加文本裝飾：無屬性到button1o defintions太

Answer 7

你把鼠標懸停錯你把懸停在這個類中重寫.button1o這種顏色

.button1o類，但.button1o文本

請用這樣的代碼

.button1o { 
background-color: transparent; 
padding: 10px 15px; 
margin-right: 15px; 
border: 2px solid #f44336; 
border-radius: 2px; 
} 
.button1o-text { 
font-size: .7em; 
font-family: 'PT Sans', sans-serif; 
font-weight: 700; 
text-transform: uppercase; 
letter-spacing: 0; 
color: #f44336; 
} 
a.button1o:hover { 
background-color: #f44336; 
} 
span.button1o-text:hover { 
transition: all 0.9s ease 0.1s; 
color:#fff; 
}