Question

当我将div background-image悬停在background:#444上时，我知道如何在悬停时显示背景图片吗？

＆＃13;

body{
    background:#ccc;
  }
.mall_vjprofile_changebg{
	float:left;
	color:#fff;
	font-size:14px;
	background-image:url(../img/camera.png);
	background-repeat:no-repeat;
	background-position:5px 5px;
	padding:10px;
	text-indent:30px;
	margin:5px;
	cursor:pointer;
	border:1px solid #fff;
}
.mall_vjprofile_changebg:hover{
	background-image:url(../img/camera.png);
	background-repeat:no-repeat;
	background-position:5px 5px;
	border:1px solid #fff;
	background:#444;	
	color:#fff;
			
}

＆＃13;

<div id="mall_vjprofile_changebg" class="mall_vjprofile_changebg">Camera</div>

＆＃13;

Answer 1

从悬停状态css中删除background:#444;。

编辑：

如果您也需要背景颜色，请尝试在一个声明中组合背景样式：

background: #444 url(../img/camera.png) 5px 5px no-repeat;

Answer 2

从悬停状态中删除background: #444。如果你想保持背景颜色写这样的代码：

.mall_vjprofile_changebg:hover{
    background-image:url(../img/camera.png);
    background-repeat:no-repeat;
    background-position:5px 5px;
    border:1px solid #fff;
    background-color: #444; 
    color:#fff;

}

Answer 3

background可用于设置以下一项或多项的值：background-clip，background-color，background-image，background-origin，background-position ，background-repeat，background-size和background-attachment：MDN

因此您需要在悬停状态下删除background:#444并设置

background-color:#444;

或喜欢

 background: url("../image/camera.png") no-repeat  5px 5px #444;

Answer 4

当你设置background: #fff时，它会覆盖其他速记属性。

你需要：

background-color: #444;

你也可以使用：

background: #444 url(../img/camera.png) 5px 5px no-repeat;

悬停的背景图像已经消失

4 个答案: