更改背景颜色和背景图片

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块之外创建另一个div用于背景蒙版（在html中的最后一个div块元素和关闭body标签之间） - 它将仅用作背景图层（具有绝对位置），样式如您所愿设置显示无以隐藏它。

然后为弹出窗口创建另一个div块（不在背景块内，但在它下面，固定位置以滚动页面），创建弹出窗口并设置你想要的样式，也可以隐藏它（不显示）。

这将为您提供可重复使用的弹出式结构，您可以使用之后需要多少次，只需在第一个之后添加新的弹出框等。

我知道这只是一个没有实际例子的理论，所以你可以在这里学习一下（关于结构，jQuery可以更简单的方式使用）：

Reusable modal popups

P.S。回答你的问题：

您需要更改背景颜色和背景图像（在悬停状态下）。 ：）

Answer 3

根据我的理解，你试图在悬停时改变背景图像和背景颜色，对吧？ 试试这个：

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

Answer 4

因为你正在覆盖悬停选择器的背景，这是正常情况。在悬停选择器

上尝试background-color:blue;

Answer 5

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

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

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

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