css - 检测悬停在背景图像上

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

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

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