更改背景颜色和背景图像

Question

I want to change my div background color and image on hover. Just like this.

I tried with this way. But it changed only background color. Is there any way to achieve this kind of situation?

<div class="col-md-4">
  <div class="icon-wrapper"></div>
     <p>Products</p>
</div>

.icon-wrapper {
    background: url("/assets/human-resources.png");
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    height: 120px;
    position: relative;
    width: 120px;
    border-radius: 50%;
    transition: all 0.2s;

    img {
        top: 22%;
        left: 24%;
        position: absolute;
    }

    &:hover {
        background: blue;
        background-position: center;
        background-repeat: no-repeat;
        background: url("/assets/car-white.png");
    }
}

Answer 1

background-color: #6DB3F2;
background-image: url('images/checked.png');

you could try to use this instead

background: #6DB3F2 url('images/checked.png');

Answer 2

I don't know all layout of your website but I can tell you a short introduction to popups - how to create them in right way.

At first, outside all other div blocks create another one for background mask (between last div block element in html and closing body tag) - it will be used only as background layer (with absolute position), style as you wish and set display none to hide it.

Then create another div block for popup (not inside background block but under it, position fixed to scroll with your page), create popup and style how you want, hide it as well (display none).

This will give you reusable popup structure that you will be able to use how many times you need afterwards just adding new popup block under first one etc.

I know it is just a theory without real life examples, so you can study a bit here (about structure, jQuery can be used in more easy way):

Reusable modal popups

PS Answer to your question:

You need to change background-color and background-image (on hover state). :)

Answer 3

In my understanding you are trying to change the background image and the background color on hover, right? Try this:

yourElement:hover{
   background-color: yellow;
   background-image: url(../images/bg.gif);
}

Answer 4

Example 1 : Table row background color change

<table>
    <tr  bgcolor="#777777">
        <td>Content Write here...</td>
    </tr>
</table>

Example 2 : If change background image then use this code

<div style="background-image: url('bg.jpg');"></div>

Answer 5

Because you are overriding background on hover selector thats normal situation. Try background-color:blue; on hover selector