检测悬停在背景图像上答案

【问题标题】：Detect Hover over Background Image检测悬停在背景图像上
【发布时间】：2013-02-25 04:17:08
【问题描述】：

我有一个输入文本。我添加了一个小于输入元素的背景图像。当我只将鼠标悬停在图像上时，我想更改图像。

这是我的 CSS：

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

编辑：我正在尝试这样做：

当我将鼠标悬停在箭头上时，我希望它改变颜色，当我点击它时，它应该提交

【问题讨论】：

:hover 我相信适用于整个输入文本。我只想在将鼠标悬停在背景图像上时更改它。
你真的不能。使用单独的元素，而不是背景图片。
我可以使用 javascript 在输入中添加一个单独的元素吗？
更好地解释你想要达到的目标，还有另一种方法
你不能只使用一个样式化的提交按钮吗？

标签： css hover

【解决方案1】：

您不能将 css :hover 用于元素的一部分。所以基本上，不，你不能做你想做的事。至少不是你想要的方式。

但是，您可以通过使用样式化的submit 按钮来实现相同的效果。当用户单击输入文本框背景中的图像时，为什么要提交表单？这在语义上是错误的。

“密码”标签使用<label> 标签，密码输入使用<input type="password"/> 标签，提交按钮使用<input type="submit"/> 标签。然后，您可以使用 CSS 设置提交按钮的样式以达到所需的效果。

【讨论】：

【解决方案2】：

您需要一个单独的内联元素（或浮动块元素），其背景图像设置为箭头。然后你可以使用 :hover 在那个元素上。

（或者这个元素可以只是一个<image> 元素，带有一个悬停属性。）

【讨论】：

我可以使用javascript添加这个图像元素吗？你能给我一个关于如何做的简单例子吗？谢谢
@VladOtrocol：您几乎可以使用 javascript 添加任何元素。