在下面的组织结构图中，当您将鼠标悬停在 A、B 或 C 列中的某个元素上时，会发生一件奇怪的事情。悬停元素后的线条和框随着悬停元素的大小改变而向下移动，但在完成调整大小后，这些线条和框返回到先前的位置。 (我想始终保持这个位置，即使在调整悬停元素的大小时也是如此)
谁能帮我解决这个问题？
代码:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
transition: all linear 1s;
}
.tree{
width: 50%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 20px;
}
ul{
list-style: none;
padding: 0;
}
ul a{
display: block;
background: #ccc;
border: 2px solid #000;
text-align: center;
font: bold 11px "Times New Roman", Times, serif;
text-decoration: none;
height: 90px;
box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5);
}
img {
width: 29%;
height: 80px;
float: left;
margin: 3px 0 0 6px;
border: 1px solid #FFF;
border-radius: 5px;
}
a:hover{
font: bold 11.5px "Times New Roman", Times, serif;
}
a:hover span{
font-size: 16px;
}
a:hover > img{
width: 30%;
height: 90px;
}
.tree span{
font-size: 15px;
}
.leader{
width: 35%;
margin: 0 auto;
}
.leader:after{
content: "";
display: block;
height: 60px;
border-left: 2px solid #000;
margin: 0 0 -20px 50%;
}
.leader a{
margin: 0 auto;
border-radius: 10px;
width: 85%;
}
.leader a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 100px;
width: 90%;
margin: -10px auto 0 auto;
}
.teams{
margin-left: -3%;
}
.teams li{
float: left;
width: 30.3%;
margin-left: 3%;
}
.teams:after{
content: "";
display: block;
width: 66.5%;
height: 20px;
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
margin-left: 18%;
}
.team li{
margin: 0 auto;
}
.team a{
height: 35px;
margin-top: 20px;
}
.team li a{
margin-left: 10%;
}
.team > a:first-child{
pointer-events: none;
}
.employees li{
float: none;
width: 100%;
}
.employees li:before{
content: "";
display: block;
height: 60px;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
width: 9%;
}
.employees li:nth-child(1n+2):before{
height: 100px;
margin-top: -43px;
}
.employees li a{
width: 90%;
height: 90px;
border-radius: 10px;
margin-top: -47px;
z-index: 1;
}
.employees li a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 100px;
width: 95%;
margin: -52px 0 -48px 5%;
}<body ondragstart="return false">
<div class="tree">
<ul>
<li class="leader"><a href="#">Leader</a></li>
<ul class="teams">
<li class="team a"><a href="#">A</a>
<ul class="employees">
<li><a href="#">A1</a></li>
<li><a href="#">A2</a></li>
<li><a href="#">A3</a></li>
<li><a href="#">A4</a></li>
</ul>
</li>
<li class="team b"><a href="#">B</a>
<ul class="employees">
<li><a href="#">B1</a></li>
<li><a href="#">B2</a></li>
</ul>
</li>
<li class="team c"><a href="#">C</a>
<ul class="employees">
<li><a href="#">C1</a></li>
<li><a href="#">C2</a></li>
<li><a href="#">C3</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</body>最佳答案
我建议使用 transform:scale(x) 来实现悬停效果，而不是实际更改元素大小。 Transform 不影响整体布局，因此周围的元素保持原样。此外，变换不会导致浏览器重新绘制，并且可以使用 GPU 进行动画处理，因此它们通常更加流畅。
关于html - 如何防止不需要的元素在 CSS 中悬停时移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30778523/