如何在懸停時更改字體顏色？
[英]How to change font color on hover?
問題描述
我在懸停偽元素上有一個按鈕動畫。 雖然填充工作正常，但字體顏色不會改變。 我確信這對我來說很愚蠢，無法弄清楚我哪里出錯了。
會很感激有人可以指出我正確的方向。
代碼筆示例在這里
https://codepen.io/sabarishiyer/pen/RwaOJyO
代碼
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box } html { font-family: Verdana, sans-serif, Arial; font-size: 10px } body { display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center; background-color: #272838 } .button { text-decoration: none; color: aquamarine; border: 3px solid aquamarine; padding: 2rem 5rem; font-size: 2.5rem; position: relative; /*To position pseudo elements relative to the button*/ transition: all 1s; } .button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; transition: all 1s; color: aquamarine; background-color: white; } .button::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; transition: all 1s; background-color: #fff; color: aquamarine; } .button:hover { color: #272838; background-color: #fff; } .button:hover:before { width: 100%; }
<html> <head> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <a class="button" href="#">Learn more</a> </body> </html>
3 個解決方案
解決方案1
3 已采納 2020-09-28 18:41:13
您的問題不是文本顏色，而是 z-index。 添加這個：
.button::after,
.button::before {
z-index: -1;
}
解決方案2
2 2020-09-28 18:44:30
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box } html { font-family: Verdana, sans-serif, Arial; font-size: 10px } body { display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center; background-color: #272838 } .button { text-decoration: none; color: aquamarine; border: 3px solid aquamarine; padding: 2rem 5rem; font-size: 2.5rem; position: relative; /*To position pseudo elements relative to the button*/ transition: all 1s; } .button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; transition: all 1s; color: aquamarine; background-color: white; } .button::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; transition: all 1s; background-color: #fff; color: aquamarine; z-index: -1; } .button:hover { color: #272838; background-color: #fff; } .button:hover:before { width: 100%; }
<html> <head> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <a class="button" href="#">Learn more</a> </body> </html>
將z-index: -1添加到.button應該可以解決問題
解決方案3
0 2020-09-28 18:52:48
使用z-index: -1;
.button::before {
z-index: -1;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
transition: all 1s;
background-color: #fff;
color: aquamarine;
}
如何更改字體真棒圖標懸停顏色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.