检测悬停在背景图像上

Question

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

这是我的css：

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

修改：我正在尝试执行此操作：

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

Answer 1

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

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

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

Answer 2

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

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