鼠标悬停在孩子身上时,可以防止父级调整大小

Question

悬停物品,你会看到wrap将调整大小悬停在第二个标题上.

怎么预防这个？

*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

.wrap{
position:fixed;
min-width:140px;
}

.title{
padding:3px 25px 3px 9px;
background:gold;
}

.title:hover{
border-right:10px solid lightseagreen;
}

<div class='wrap'>
<div class='title'>lorem</div>
<div class='title'>loremxxxxxxxxxxx</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
</div>

Answer 1

最好的简单解决方案是将title颜色的边框应用为透明,然后悬停更改边框的颜色.    

检查下面

.title{
 ..
 ..
 border-right:10px solid transparent;
 ..
}

.title:hover{
 border-right-color: lightseagreen;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

.wrap{
position:fixed;
min-width:140px;
}

.title{
padding:3px 25px 3px 9px;
min-width:30%;
background:gold;
margin-right:15px;
border-right:10px solid transparent;
}

.title:hover{
border-right-color: lightseagreen;
}

<div class='wrap'>
<div class='title'>lorem</div>
<div class='title'>loremxxxxxxxxxxx</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
</div>