更改背景颜色和背景图像

Question

我想在悬停时更改div背景颜色和图像。 像这样。

我尝试过这种方式。 但是它只改变了背景色。 有什么办法可以解决这种情况？

<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');

您可以尝试使用它来代替

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

Answer 2

我不知道您网站的所有布局，但是我可以告诉您有关弹出式窗口的简短介绍-如何以正确的方式创建弹出式窗口。

首先，在所有其他div块之外，为背景蒙版创建另一个（在html中的最后一个div块元素与body标记之间）-它仅用作背景层（具有绝对位置），根据需要设置样式并设置为不显示隐藏它。

然后为弹出窗口创建另一个div块（不在背景块内部，而是在其下，固定位置以与页面一起滚动），创建弹出窗口并按需要设置样式，也将其隐藏（不显示）。

这将为您提供可重复使用的弹出结构，之后您只需使用第一个添加新的弹出块等即可使用所需的次数。

我知道这只是一个没有实际例子的理论，因此您可以在这里进行一些研究（关于结构，可以更简单地使用jQuery）：

可重复使用的模式弹出窗口

PS回答您的问题：

您需要更改背景颜色和背景图像（处于悬停状态）。 :)

Answer 3

以我的理解，您正在尝试更改悬停时的背景图片和背景颜色，对吗？ 尝试这个：

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

Answer 4

示例1：表格行背景颜色的变化

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

示例2：如果更改背景图像，则使用此代码

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

Answer 5

因为您在悬停选择器上覆盖了背景，这是正常情况。 试试background-color:blue; 悬停选择器