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

Question

我有以下代码：

<!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之上，而我没有一定的空间用于图片。

谢谢

Answer 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>

Answer 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的背景图像

问题描述

2 个解决方案

解决方案1
1 2015-10-22 13:34:58

解决方案2
1 已采纳 2015-10-22 13:45:57

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

问题描述

2 个解决方案

解决方案1 1 2015-10-22 13:34:58

解决方案2 1 已采纳 2015-10-22 13:45:57

解决方案1
1 2015-10-22 13:34:58

解决方案2
1 已采纳 2015-10-22 13:45:57