检测鼠标悬停在背景图片上 [英] Detect Hover over Background Image

问题描述

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

I have an input text. I added a background image which is smaller than the input element. I want to change the image when I hover over the image only.

这是我的css：

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

编辑：我试图这样做：

I am trying to do this:

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

When I hover over the arrow I want it to change color and when i click on it it should submit

推荐答案

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

You can't use css :hover for a part of an element. So basically, no, you can't do what you're trying to do. At least not the way you want to do it.

但是，您可以通过使用样式提交按钮。为什么要在用户在输入文本框的背景中点击图片时提交表单？这在语义上是错误的。

You can achieve the same effect, however, by using a styled submit button. Why would you want to submit a form when the user clicks an image in the background of an input textbox anyway? That's semantically just wrong.

使用< label> c输入的< input type =password/> 标签，并使用< input type =submit/& code>标签。然后，您可以使用CSS设置提交按钮的样式，以实现所需的效果。

Use a <label> tag for the 'Password' label, an <input type="password"/> tag for the password input, and use an <input type="submit"/> tag for the submit button. You can then style the submit button using CSS to achieve the desired effect.

这篇关于检测鼠标悬停在背景图片上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！