将鼠标悬停在图像上时更改 div 的背景图像答案

【问题标题】：Change a div`s background image when hover over the image将鼠标悬停在图像上时更改 div 的背景图像
【发布时间】：2016-01-21 19:09:28
【问题描述】：

我有以下代码：

<!DOCTYPE html> <html >
 <head> 
    <style type="text/css"> 
        .imgBox {background: url(lock75.png) no-repeat; } 
        .imgBox:hover {background: url(lock75light.png) no-repeat; } 
    </style> 
</head> 
<body> 
    <div style="width:200px; height:200px; border:1px solid;" class="imgBox"> </div> 
</body>
</html>

我的图像是 75x75 并且出现的问题是，当我将鼠标悬停在边框上时图像会发生变化，而我希望将鼠标悬停在图像上时会更改图像。

注意：我需要一个类似于这个的 html 结构。

编辑

我忘了提到我需要将图片集中在其他 div 之上，而我没有一定的图片空间。

谢谢

【问题讨论】：

将div 的宽度减少到 75 像素。
和哪一个类似？
不可能我的 div 中除了图片还有其他内容。
你必须为图片创建一个额外的 div。
@AdamAzad 请多谈谈你的想法？我有内容（其他 div 按钮等）。你的意思是用 z-index 或其他东西放在我的 div 上方的其他 div 吗？

标签： html css image background

【解决方案1】：

我想你正在寻找这个：

.container {
    border:1px solid #000;
    display:inline-block;
    height:200px;
    width:200px;
}
.imgBox {
    background:url(http://placehold.it/100x100) no-repeat;
    height:75px;
    width:75px;
} 
.imgBox:hover {
    background:url(http://placehold.it/75x75) no-repeat;
}

<div class="container">
    <div class="imgBox"> </div> 
</div>

【讨论】：

我忘了提到我需要将图片集中在其他 div 之上，而我没有一定的图片空间。

【解决方案2】：

您需要有一个容器，可以在以下结构中保存背景图片和内容（我知道您要求的内容与您发布的内容类似，但这是不可能的；是的，但它会涉及 CSS3元素和 jQuery)

这是设置

body {
    padding:10px;
}
.img-box {
    max-width:200px;
    width:100%;
    border:1px solid #ddd;
}
.img-box .img {
    width:200px;
    height:200px;
    background: url(https://unsplash.it/200/200/?image=876) no-repeat;
    border-bottom:1px solid #ddd;
}
.img-box .img:hover {
    background: url(https://unsplash.it/200/200/?image=876&blur) no-repeat;
}
p { margin:5px }

<div class="img-box">
    <div class="img" ></div>
    <p>other content here</p>
</div>

【讨论】：

我忘了提到我需要将图片集中在其他 div 之上，而我没有一定的图片空间。