Joe Zalewski Joe Zalewski - 6 months ago 27
CSS Question

CSS :hover Selector not working as expected with gifs

I am working on a new button styles and currently facing a challenge: my

selector is not behaving as expected.

All attempts to making it work have proven futile.

How can I possibly achieve that effectively?

Below is my code:

.button_depression {
background: url(
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;

.button_depression:hover {
background-color: #959595;


Simply use background for your hover; not background-color as illustrated in the snippet below:

.button_depression:hover {
    background: #959595;

Brief summary:

background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.

In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)

.button_depression:hover {
    background-color: #959595;
    background-image: none;

(background-image: unset; works well too, but can't tell if supported by all browsers)

Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).

More details here ....