Background and hover effect

[toplisek]

I try to set hover effect when I have input:
background: linear-gradient(to bottom, #XXX 0%, #XXX 100%);

As hover effect is not working if I place

myform input[type="submit"]:hover {
 background-color: #XXX;
 color: #000;
}

How to manage hover in this case? If I place background it should be inside hover also background? Need help.

[PaulOB]

@toplisek

If I place background it should be inside hover also background?

Hmm hard to decipher but I’ll have a go

It sounds like you have an input that on default has a linear gradient. When you hover the input the background- color should change?

Is that correct?

If so then there are things to consider.

You won’t see the background-color because the linear gradient is on top of the background and if the linear gradient isn’t transparent then changing the background color will have no effect.

If your linear gradient is transparent then yes you should see the background change with your code.

If the linear gradient isn’t transparent then you need to remove it on hover so that you can see the background. Just using the shorthand background property will accomplish this.

input[type="submit"]:hover {
 background:red;
 color: #000;
}

Remember that linear-gradients are effectively like images and if you had a background image in place you wouldn’t expect to see any change if you changed the background-color.