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.

this is my css:

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

Edit: I am trying to do this:

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

回答1:

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.

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.

回答2:

You need a separate inline element (or floated block element) that has a background image set to the arrow. Then you could use :hover on that element.

(Or this element could simply be an <image> element, with a hover property.)

来源：https://stackoverflow.com/questions/15314004/detect-hover-over-background-image