檢測懸停在背景圖片上

我有一個輸入文本。我添加了一個小於輸入元素的背景圖片。我只想將鼠標懸停在圖像上時更改圖像。檢測懸停在背景圖片上

這是我的CSS：

#inputBox2{ 
    top:45%; 
    background-image:url(".\\Images\\arrow.png"); 
    background-repeat: no-repeat; 
    background-size: 14% 100%; 
    background-position: right; 
}

編輯：我試圖做到這一點： enter image description here

當我懸停我希望它改變顏色的箭頭，當我點擊它它應該提交

來源

2013-03-09 Vlad Otrocol

：懸停我相信對整個輸入文本的作品。只有當我將鼠標懸停在背景圖片上時，我纔想更改它。 – 2013-03-09 18:00:05

你真的不能。使用單獨的元素，而不是背景圖像。 – 2013-03-09 18:00:30

我可以添加一個單獨的元素使用JavaScript的輸入？ – 2013-03-09 18:01:07

您不能使用css :hover作爲元素的一部分。所以基本上，不，你不能做你想做的事情。至少不是你想要這樣做的方式。

但是，通過使用樣式submit按鈕可以達到相同的效果。爲什麼要在用戶點擊輸入文本框背景中的圖像時提交表單？這在語義上恰恰是錯誤的。

對'密碼'標籤使用<label>標記，對密碼輸入使用<input type="password"/>標記，並對提交按鈕使用<input type="submit"/>標記。然後，您可以使用CSS來設置提交按鈕的樣式，以達到所需的效果。

來源

2013-03-09 18:16:06

您需要將背景圖像設置爲箭頭的單獨內聯元素（或浮動塊元素）。然後你可以使用：懸停在那個元素上。

（或者該元素可能僅僅是一個<image>元素，懸停性能。）

來源

2013-03-09 18:20:04 ktm5124

可以使用javascript添加此圖像元素嗎？你能給我一個關於如何做的簡單例子嗎？謝謝 – 2013-03-09 18:25:01

@VladOtrocol：你幾乎可以使用javascript添加任何元素。 – 2013-03-09 19:21:59

檢測懸停在背景圖片上

回答

相關問題