防止鼠标悬停孩子时父母调整大小

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>

Answer 2

您可以设置透明边框，然后改为在悬停时更改边框颜色。

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

.title:hover { border-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;
border-right:10px solid transparent;
}

.title:hover{
border-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>

Answer 3

增加.wrap的最小宽度，使其大于内部的最长字符串。 例如，我将其设置为250px。

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

.title{
padding:3px 25px 3px 9px;
min-width:30%;
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>