让div在悬停后保持原位
问题描述:
我想让div标签在悬停图像后保持原位。截至目前,当我悬停图像时,div移动到右侧。我尝试使用固定位置和绝对,但没有运气。下面是HTML代码:让div在悬停后保持原位
<div>
<button class="buttonTest"></button>
</div>
在CSS:
.buttonTest{
background-image: url('http://hd-wall-papers.com/images/wallpapers/random- image/random-image-16.jpg');
width:150px;
height:150px;
}
div {
border-style: solid;
height:auto;
width:150px;
}
div{
transition: all .2s ease-in-out;
}
div:hover{
border-width:75px;
transform: scale(.5);
}
答
使用盒大小:边界盒和一些变化。这是期望的行为吗?
.buttonTest{
background-image: url('http://hd-wall-papers.com/images/wallpapers/random-image/random-image-16.jpg');
width:100%;
height:100%;
}
div {
border-style: solid;
height:150px;
width:150px;
transition: all .2s ease-in-out;
box-sizing: border-box;
}
div:hover{
border-width:15px;
transform: scale(.80);
}
<div>
<button class="buttonTest"></button>
</div>
<div>
<button class="buttonTest"></button>
</div>
这有点不清楚你的最终目标是什么。这是你想要做的吗? https://codepen.io/mcoker/pen/vxLZRW –
是的!此外,我希望边框宽度变粗,以使其看起来像鼠标按下按钮。 –
更新了笔https://codepen.io/mcoker/pen/vxLZRW –