我正在尝试在悬停时为图像添加顶部边框。边框应显示在图像的顶部(我的意思是在顶部的图像内),它不应该在图像的宽度上添加额外的像素。
下面的图片代表了我想要实现的目标:左图片 - 没有边框的图片,右图片,图片顶部带边框的图片
我尝试使用悬停添加边框,但将鼠标悬停在img标记上 - 边框会添加到图像中 - 然后图像的宽度会更大。
答案 0 :(得分:4)
'box-sizing'属性在这里很重要,以确保它不会为div本身添加边距大小,而是添加到'inside',如果你愿意的话。
.image {
width:200px;
height:200px;
float:left;
background:black;
margin:10px;
box-sizing:border-box;
position:relative;
}
.image img {
width:100%;
float:left;
}
.image:hover .overlay {
border-top:4px solid red;
}
.overlay {
width:100%;
position:absolute;
top:0;
left:0;
}
<div class="image">
<div class="overlay"></div>
<img src="https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_1280.jpg"/>
</div>
<div class="image">
<div class="overlay"></div>
<img src="https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_1280.jpg"/>
</div>
答案 1 :(得分:0)
您可以在css中添加此代码
.image {
width:200px;
height:200px;
float:left;
background:black;
margin:10px;
box-sizing:border-box;
position:relative;
}
.image:before {
content:'';
opacity:0;
}
.image:hover:before {
position:absolute;
height:5px;
width:100%;
top:0px;
background:red;
z-index:100;
content:'';
-webkit-transition:all .5s;
opacity:1;
}
<div class="image"></div>
答案 2 :(得分:0)
这仍然是可能的。查看下面的小提琴链接中的代码并尝试这样的事情:
<强> HTML 强>
<div class="image-container">
<div class="top-border"></div>
<img src="yourimagehere">
</div>
<强> CSS 强>
.image-container {
position:relative;
width:225px;
height:225px;
}
.top-border {
width:100%;
height:10px;
background:green;
position:absolute;
display:none;
}
.image-container:hover .top-border {
display:block
}