按下/聚焦/禁用時改變按鈕圖像

-3

我有幾個同一個按鈕的圖片，每個圖片代表不同的狀態：正常，按下，聚焦，禁用。按下/聚焦/禁用時改變按鈕圖像

如何將它變成一個能自動顯示正確圖片的html按鈕（並且還有一個onClick事件）？

隨意使用html/css/javascript。

的標籤也並不需要是一個按鈕，它可以是一個圖像，或任何你想要的，但希望寫在一個通用的足夠的路讓別人使用你的解決方案過於

謝謝！

2017-08-09 Hibuki

你嘗試過什麼到目前爲止？ StackOverflow不是一個免費的代碼寫入服務，並期望你[**嘗試首先解決你自己的問題**]（http://meta.stackoverflow.com/questions/261592）。請更新您的問題以顯示您已經嘗試的內容，在[**最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）中展示您面臨的特定問題。有關詳細信息，請參閱[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask）:) –

SO不是代碼服務。 –

哦，哇，對不起:(我實際上在做更具體的事情（創建一個使用React組件進行Firebase身份驗證的Google登錄按鈕），但我目前的按鈕處理看起來並不像最佳實踐我在我的職業生涯中完成了大量的C++，但這是我的第一個Web項目）由於我沒有找到這個非常普遍的聲音問題（一個改變圖片的按鈕）的最佳實踐解決方案，所以我發佈了這個問題。問題，我可以用我當前（React）代碼的一個完整示例發佈一個新問題，（儘管我認爲它對社區來說不太有用）@obsidian – Hibuki

您可以使用CSS僞選擇:hover和:focus的改變在各種不同的交互點按鈕的狀態，並簡單地扎一個功能到onclick事件，以便運行額外的JavaScript如果需要的話：

function buttonClick() { 
 
    console.log('Button clicked'); 
 
}

button { /* Default state */ 
 
    background: white; 
 
} 
 

 
button:hover { /* On hover */ 
 
    background: red; 
 
} 
 

 
button:focus { /* After a click */ 
 
    background: blue; 
 
}

<button onclick="buttonClick()">Button</button>

請記住，這也可以用圖像通過傳遞圖像的路徑傳遞到background-image作爲url()值來完成。

來源

2017-08-09 22:51:33

[SO不是代碼服務]（https：// stackoverflow.com/questions/45601739/make-a-button-image-change-when-pressed-focused-disabled#comment78162914_45601739）但是你仍然有反應嗎？ – Daedalus

@達達盧斯 - 我有**字面意思**沒有什麼比這更好的了。那一刻，並認爲這個答案可能至少可以幫助一些人:) –

很好。我很驚訝那裏似乎並不是一個重複的目標，它可以更好地達到目的。 – Daedalus

只是一個類添加到鏈接：

<a href="#" class='styledbutton'>Buttontext</a>

......以及一些CSS：

.styledbutton {background: url(defaultstate.png); display: inline-block;} 
.styledbutton:hover {background: url(hoverstate.png);} 
.styledbutton:focus {background: url(focusstate.png);}

來源

2017-08-09 22:56:58 JoostS

按下/聚焦/禁用時改變按鈕圖像

回答

相關問題