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

我认为你正在寻找这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你需要一个容器，可以同时容纳背景图像和你的内容在下面的结构（我知道你要求的东西类似于你发布的东西，但它不可能;好吧，但它是它将涉及CSS3元素和jQuery）

这是设置

＆＃13;

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 }

＆＃13;

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

＆＃13;

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

2 个答案: