更改div`s背景图像时，将鼠标悬停在图像

我有以下代码：更改div`s背景图像时，将鼠标悬停在图像

<!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以上是集中式的图片。

感谢

来源

2015-10-22 MartinZPetrov

减少'div'宽度960x75像素。 –

与哪一个相似？ –

不可能我在div中除了图像以外还有其他内容。 – MartinZPetrov

你需要有一个可容纳两个背景图像和下面的结构内容的容器（我知道你问过类似于你发布的东西，但这不可能;好吧，但它会涉及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>

来源

2015-10-22 13:45:57

我忘了提及我需要将图片集中在其他div上面，而我没有为图片添加一定的空间。 – MartinZPetrov

我认为你正在寻找这样的：

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

来源

2015-10-22 13:34:58

我忘了提及，我需要图片集中在其他divs，我没有一定的空间的照片。 – MartinZPetrov

更改div`s背景图像时，将鼠标悬停在图像

回答

相关问题