我有几个Bootstrap行容器，它们在悬停时会得到一个虚线边框，并在一些分组按钮的顶部突出显示。
现在当我悬停在容器上时，这个悬停效果应该有一个固定的位置，不会产生任何烦人的上下移动容器，但无法真正正确处理。
这是我的plunkr
以及我的标记中的一些片段
#oc-visual-composer {
display: block;
padding: 20px;
border: 1px silver dashed;
margin-top: 50px;
}
#oc-visual-composer .editor_buttons {
display: inline-block;
margin: auto 47%;
}
#oc-visual-composer:hover a {
color: black;
}
.editor-controls {
display: block;
position: relative;
padding-top: 15px;
}
.editor-controls .btn-sm,
.editor-controls .btn-group-sm > .btn,
.editor-controls .btn-group-sm > .btn {
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.editor-controls .btn-sm button,
.editor-controls .btn-group-sm > .btn button,
.editor-controls .btn-group-sm > .btn button {
display: none;
}
.editor-controls button {
display: none;
}
.editor-controls button:first-child {
display: block;
}
.editor-controls button:last-child {
display: block;
}
.editor-controls .btn-group-sm.active button {
display: inline-block;
}
.editor-controls .btn-group-sm.active button:last-child {
display: none;
}
.editor-controls:hover .row-controll.btn-group-sm {
display: block;
}
.editor-controls:hover .column-controll.btn-group-sm {
display: block;
}
.editor-controls:hover button.add {
display: block;
}
.editor-controls:hover .editor-row {
border: 1px silver dashed;
padding: -3px;
display: block;
position: relative;
}
.editor-controls:hover .editor-row button.add {
display: block;
}
.editor-controls .row-controll.btn-group-sm {
display: none;
position: relative;
left: -15px;
position: relative;
top: -11px;
z-index: 3;
}
.editor-controls .row-controll.btn-group-sm button {
border: none;
transition: background-color 0.3s ease;
background-color: #093459;
color: #fff;
}
.editor-controls .row-controll.btn-group-sm button i {
color: white;
}
.editor-controls .row-controll.btn-group-sm button:hover {
background: #032644;
}
.editor-controls .row-controll.btn-group-sm .row-handle.btn.btn-default {
cursor: move;
}
.editor-controls .column-controll.btn-group-sm {
display: none;
position: relative;
left: -10px;
position: relative;
top: -11px;
z-index: 3;
}
.editor-controls .column-controll.btn-group-sm button {
border: none;
transition: background-color 0.3s ease;
background-color: orange;
color: #fff;
}
.editor-controls .column-controll.btn-group-sm button i {
color: white;
}
.editor-controls .column-controll.btn-group-sm button:hover {
background: #e78800;
}
.editor-controls .column-controll.btn-group-sm button:hover .editor-row {
border: 1px silver dashed;
padding: -3px;
display: block;
position: relative;
}
.editor-controls button.add {
display: none;
background-color: #f9b418;
margin: 0 auto;
position: relative;
bottom: 2px;
padding: 0px 5px;
border-radius: 2px !important;
transition: background-color 0.3s ease;
}
.editor-controls button.add:after {
position: absolute;
top: -9px;
left: 0px;
display: inline-block;
border-right: 5px solid transparent;
border-bottom: 5px solid #f9b418;
border-left: 4px solid transparent;
transition: background-color 0.3s ease;
content: '';
}
.editor-controls button.add:hover {
background: #e78800;
}
.editor-controls button.add:hover:after {
position: absolute;
top: -9px;
left: 0px;
display: inline-block;
border-right: 5px solid transparent;
border-bottom: 5px solid #e78800;
border-left: 4px solid transparent;
content: '';
}
.editor-controls button.add .btn-sm,
.editor-controls button.add .btn-group-sm > .btn,
.editor-controls button.add .editor-controls .btn-group-sm > .btn,
.editor-controls button.add .editor-controls .btn-group-sm > .btn {
border-bottom-left-radius: 2px !important;
border-bottom-right-radius: 2px !important;
}
.editor-controls button.add i {
color: #fff;
}
.editor-row {
padding: 1px;
margin-top: 15px;
}
.editor-row:hover {
border: 1px silver dashed;
display: block;
position: relative;
}
.editor-row:hover:: after {
display: block;
content: '';
font-weight: bold;
height: 1px;
color: transparent;
overflow: hidden;
visibility: hidden;
}
a {
color: silver;
}
.controls {
display: none;
}
/ *＃sourceMappingURL = main.css.map * /
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap-css@*" />
<link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<body>
<div class="container sortable-rows">
<div class="editor-controls">
<div data-type="row" class="row-controll btn-group btn-group-sm" role="group">
<button type="button" class="row-handle btn btn-default">
<i class="fa fa-arrows-alt"></i>
Row
</button>
<button data-control="edit" type="button" title="edit Row content" class="row-edit btn btn-default">
<i class="fa fa-pencil"></i>
</button>
<button data-control="grid" type="button" class="grid btn btn-default">
<i class="fa fa-list"></i>
</button>
<button data-control="add" type="button" class="components btn btn-default">
<i class="fa fa-plus"></i>
</button>
<button data-control="clone" type="button" class="clone btn btn-default">
<i class="fa fa-copy"></i>
</button>
<button data-control="delete" type="button" class="delete btn btn-default">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" class="btn btn-default expand">
<i class="fa fa-caret-right"></i>
</button>
</div>
<div data-type="row" class="column-controll btn-group btn-group-sm active" role="group">
<button type="button" class="btn btn-default">
<i class="fa fa-arrows-alt"></i>
Column
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-pencil"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" class="btn btn-default expand-column expand">
<i class="fa fa-caret-right"></i>
</button>
</div>
<div class="row editor-row ">
<div class="col-lg-12 ">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a>
on September 24, 2014</p>
</div>
<hr />
</div>
</div>
<button class="btn btn-sm add">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="editor-controls">
<div class="row-controll btn-group btn-group-sm active" role="group">
<button type="button" class="row-handle btn btn-default">
<i class="fa fa-arrows-alt"></i>
Row
</button>
<button data-control="edit" type="button" class="btn btn-default">
<i class="fa fa-pencil"></i>
</button>
<button data-control="grid" type="button" class="btn btn-default">
<i class="fa fa-list"></i>
</button>
<button data-control="add" type="button" class="btn btn-default">
<i class="fa fa-plus"></i>
</button>
<button data-control="clone" type="button" class="btn btn-default">
<i class="fa fa-copy"></i>
</button>
<button data-control="delete" type="button" class="btn btn-default">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" class="btn btn-default expand">
<i class="fa fa-caret-right"></i>
</button>
</div>
<div class="column-controll btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-default">
<i class="fa fa-arrows-alt"></i>
Column
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-pencil"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" class="btn btn-default expand">
<i class="fa fa-caret-right"></i>
</button>
</div>
<div class="row editor-row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
<button class="btn btn-sm add">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</body>
</html>