CODEWITHSUNDEEP
css
user1115666
user1115666

Reputation:

background image reloading on hover?

I'm trying to make the background color change on :hover but keep the background image the same — the problem I'm having is that every "first time" it's hovered over after the page is loaded, the background image reloads, making it disappear and reappear for a split second. Of course, every other time you hover over the div after that it's fine, but it's always that first hover after the page is loaded that the div decides to not realize that it's using the same exact background on hover and reloads the same image again.

    #ask, #drop {
        background: rgba(0,0,0,0.38) url('example.png') no-repeat;
        width: 18px;
        height: 18px;
    }

    #ask:hover, #drop:hover {
        background: rgba(0,0,0,0.32);
    }

    #ask {
        background-position: 1px 1px;    
    }

    #drop {
        background-position: -300px 0px;
    }

Please keep in mind I'm not exactly sure if it's reloading or if it's just a browser bug or something.

Upvotes: 0

Views: 596

Answers (1)

DA.
DA.

Reputation: 40671

You are changing the entire background when you only want to change background-color

use this:

#example:hover {
    background-color: #666;
}

Upvotes: 2

Related Questions