Joe Zalewski Joe Zalewski - 2 months ago 8
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

<button>
CSS
:hover
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(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
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;
}

Answer

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 ....

Comments