：之前元素重疊我的按鈕上的文字懸停

我有一個背景顏色和文本顏色設置的按鈕。我喜歡做的事情是，當用戶將鼠標懸停在按鈕上時，背景從底部到頂部進行動畫處理，並將文本的顏色更改爲背景的顏色。：之前元素重疊我的按鈕上的文字懸停

爲了簡化代碼，我沒有把我喜歡應用在CSS屬性上的瞬態。我知道更改按鈕後臺代碼非常容易，但我打算使用瞬態來更改懸停時的高度。

所以我有以下代碼，但是當我將鼠標懸停在按鈕上時，:before重疊了我的按鈕文本。

我也嘗試玩z-index，但沒有運氣。你認爲有沒有解決這個問題的方法？

body { 
 
    background: #111; 
 
} 
 
.btn { 
 
    color: #FFF; 
 
    background: #333; 
 
    border: none; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    padding: 18px 60px; 
 
    position: relative; 
 
} 
 
.btn:before { 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 0; 
 
    background: #FFF; 
 
} 
 
.btn:hover { 
 
    color: #333; 
 
} 
 
.btn:hover:before { 
 
    height: 100%; 
 
}

<br /> 
 
<a href="#" class="btn">Do Stuff</a>

來源

2016-01-15 Merianos Nikos

可以解釋爲什麼downvote？：？ –

@FestiveTurnip無論如何，我都不明白這個問題。沒關係。 '：）' –

Nopes ...有些不對。我沒有得到這個問題。這可以通過一個簡單的'背景顏色'更改權利來完成？ @MerianosNikos。 –

您需要添加額外的<span>元素將保持在::僞元素之前：

span { 
    position: relative; 
    z-index: 1; 
}

fiddle

來源

2016-01-15 12:50:30 Senthe

解決方案，如果很明顯 - 按鈕的內容也應該是絕對定位。然後瀏覽器將它們正確地排列在對方後面

編輯：也許我的格式和樣式是不是最好的情況下，但它是你的代碼的快速更新，才能認識

body { 
 
    background: #111; 
 
} 
 
.btn { 
 
    color: #FFF; 
 
    background: #333; 
 
    border: none; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    padding: 18px 60px; 
 
    position: relative; 
 
} 
 
.btn span { 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 18px; 
 
    left: 0px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.btn:before { 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 0; 
 
    background: #FFF; 
 
} 
 
.btn:hover { 
 
    color: #333; 
 
} 
 
.btn:hover:before { 
 
    height: 100%; 
 
}

<br /> 
 
<a href="#" class="btn"><span>Do Stuff</span></a>

來源

2016-01-15 12:48:23 SergeS

如果您使用「相對」跨度，則不需要「左」和「頂」值 – Turnip

嘗試親戚，它完全破裂。不知道爲什麼 – SergeS

試試這個：

body { 
 
    background: #333; 
 
} 
 
.btn { 
 
    color: #FFF; 
 
    background: #333; 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    -webkit-transition: color 0.3s ease-in-out; 
 
    transition: color 0.3s ease-in-out; 
 
} 
 
.btn span { 
 
    display: inline-block; 
 
    padding: 18px 60px; 
 
    border: none; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 
.btn:after { 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: 100%; 
 
    max-height: 0; 
 
    background: #FFF; 
 
    height: 100%; 
 
    z-index: 9; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.btn:hover { 
 
    color: #333; 
 
} 
 
.btn:hover:after { 
 
    max-height: 100%; 
 
    top: 0; 
 
}

<a href="#" class="btn"><span>Do Stuff</span></a>

來源

2016-01-15 13:14:32 juallom

你想要的效果也可以不添加額外的跨度來實現的。通過利用前後僞元素爲背景顏色並正確定位它們。

要將僞元素放置在文本後面，請在元素上設置正z-index，並在僞元素上設置負z-index。

.btn {z-index: 1} 
.btn:before {z-index: -1;}

參考本文由Nicolas Gallagher的這解釋了在更詳細地，參見「僞背景位置」 http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/。

也看到撥弄它在行動：如果你申請一個背景顏色到.btn本身https://jsfiddle.net/j9whmcmz/2/

這種技術是行不通的。

選擇你的毒藥我猜，這兩種解決方案都有效。

來源

2016-01-15 13:40:22 Raevenk

：之前元素重疊我的按鈕上的文字懸停

回答

相關問題