使文本顯示在懸停按鈕

我想要做的是有這樣的事情：使文本顯示在懸停按鈕

<button class="addMore">+</button>

做這樣的效果：

https://i.gyazo.com/d353b657df39c0e6ff159bfdb713f6a4.mp4

，當你在它懸停。

我已經能夠找到幾個不同的東西，但沒有一個是我想要的在視頻中的行爲。

來源

2017-08-02 DragonHeart000

使用title，以顯示您的留言：

<button class="addMore" title="click here">+</button>

來源

2017-08-02 09:18:33 Bhargav

哇，這麼簡單。在這裏，我在亂搞：徘徊了一小時嘗試不同的事情......我感到羞愧，但嘿，這就是你學習的方式。我再也不會犯這個錯誤了。 – DragonHeart000

後續問題，是否可以設置？ – DragonHeart000

您可以使用CSS設置如下按鈕的背景顏色變化，

.addMore:hover { 
    background-color: #545454; //desired color code 
}

，並設置工具提示爲<button class="addMore" title="click here">+</button>

來源

2017-08-02 09:24:05 kmg

.addMore{ 
 
    border: none; 
 
    width: 32px; 
 
    height: 32px; 
 
    background-color: #eee; 
 
    transition: all ease-in-out 0.2s; 
 
    cursor: pointer; 
 
} 
 
.addMore:hover{ 
 
    border: 1px solid #888; 
 
    background-color: #ddd; 
 
}

<button class="addMore" title="Hover on me!">+</button>

來源

2017-08-02 10:00:41

使文本顯示在懸停按鈕

回答

相關問題