我不明白为什么当我将鼠标悬停在第一个框(左上角)上时,框会发生变化。我已将 box-sizing 设置为 border-box,因此悬停时添加的边框不会产生影响,并且它只发生在第一个框上。请帮忙!
JS小提琴here.
* {
box-sizing: border-box !important;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#gameArea {
width: 700px;
margin: 0 auto;
}
h1{
text-align: center;
}
.card {
float: left;
margin: 10px;
padding: 20px;
background: lightblue;
text-align: center;
border-radius: 5px;
box-shadow: 10px 10px 10px #ccc;
}
.hidden{
display: none;
}
.card:hover {
cursor: pointer;
border: 3px solid blue;
}
.card p {
font-size: 48px;
color: blue;
}
img {
width: 250px;
height: 188px;
vertical-align: middle;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
margin:0;
}
这是因为边框宽度会增加元素的宽度,因此当在悬停时向元素添加额外宽度时,它将改变正常的布局流程。
您可以通过添加一个轻松修复它3px
静态透明边框:
.card { border: 3px solid transparent; }
jsFiddle 叉子:https://jsfiddle.net/azizn/pL2j0zu5/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)