如何在我悬停时延长背景颜色

Question

我正在使用引导程序面板。 PSD建议当我将鼠标悬停在面板背景颜色上时，内容颜色会发生变化。那很好我能做到的。 但如何在顶部和底部延伸悬停颜色？和内容的位置应该留在那里！

<div class="row">
  <div class="col-md-4">
    <div class="panel">

    </div>
  </div>
</div>

.panel:hover{
  background-color: #13BDFF;
}

Answer 1

更新

只需使用具有出色浏览器支持（IE8 +）的outline CSS属性即可。演示：

.panel:hover {
  background-color: #13BDFF;
  outline: 5px solid #13BDFF;
}

/* just styles for demo */
.panel {
  padding: 10px;
  background-color: lime;
}

<div class="panel">
  This is panel
</div>

原始答案（不推荐的方式）

你可以使用透明边框（填充也可以帮助你）和负边距：

.panel:hover {
  background-color: #13BDFF;
  border: 5px solid transparent;
  margin-left: -5px;
  margin-top: -5px;
}

/* just styles for demo */
.panel {
  padding: 10px;
  background-color: lime;
}

<div class="panel">
  This is panel
</div>

Answer 2

https://jsfiddle.net/xkqvv92p/

这是在悬停时使用填充的版本。

.rowArea {
  height: 400px;
  background-color: red;
  display: flex;
  align-items: center;
}

#container {
  margin: auto;
  width: 200px;
  height: 300px;
  background-color: white;
  border-radius: 5px;
  padding: 5px;
}

#container:hover {
  padding: 30px 5px;
  background-color: #13C3FF;
}

<div class="rowArea">
  <div id="container">hi</div>
  <div id="container">hi2</div>
</div>

Answer 3

更改边框颜色和大小可能会解决问题。 请参考样本小提琴：

.panel:hover{
  background-color: #13BDFF;
  border-color : #13BDFF;
  border:10px solid #13BDFF;
}

https://jsfiddle.net/3wkjuzbk/1/