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

Question

I have the following code: 我有以下代码：

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

My images are 75x75 and the problem occurs that when I hover over the border the image changes, I want when hovering over the image to change the image. 我的图像是75x75，问题是当我将鼠标悬停在边框上时图像会发生变化，我希望将鼠标悬停在图像上以更改图像。

Note: I need a html construction similar to this one. 注意：我需要一个与此类似的html结构。

EDIT 编辑

I forgot to mention that I need the picture to be centralized above the other divs which I have not a certain space for the picture. 我忘了提到我需要将图片集中在其他div之上，而我没有一定的空间用于图片。

Thanks 谢谢

Answer 1

I think you are searching for this: 我想你正在寻找这个：

 .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

You need to have a container that can hold both the background image and your content in the following structure (I know you asked for something similar to what you have posted, but it's not possible; well it is but it will involve CSS3 elements and jQuery) 你需要一个容器，它可以同时保存背景图像和你的内容在下面的结构（我知道你要求的东西类似于你发布的东西，但它不可能;它确实是，但它将涉及CSS3元素和jQuery ）

Here's the setup 这是设置

 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