在悬停时停止文本向下移动

Question

我在 div 块的中间有一个字体大小为 80px 的文本。当我将鼠标悬停在 div 块上时，它会将边框大小从 1px 更改为 5px，并带有蓝色，但文本会向下移动。

.calendar-content {
  width: 81%;
  display: block;
  padding: 0;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 150px;
}

.calendarday-container {
  width: 139px;
  height: 139px;
  float: left;
  position: relative;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid #ccc;
}

.calendarday-add .calendarday-number {
  display: inline-block;
  width: 100%;
  font-size: 80px;
  color: #f1f1f1;
  margin: 12px 0px;
  text-align: center;
}

.calendarday-number:hover {
  margin: 12px 2px;
}

.calendarday-container:hover {
  border: 5px solid #2e7ad1;
}

.add-day-ico {
  display: none;
  width: 21px;
  height: 21px;
  margin: 22px 0px;
  float: right;
}

.calendarday-container:hover .add-day-ico {
  display: block;
  margin: 22px 0px;
}

<div class="calendarday-container" data-day="0" data-dropable="true">
  <a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
    <span class="calendarday-number">0</span>
    <img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
  </a>

</div>

Jsfiddle：http://jsfiddle.net/f0k6r9nb/

我已尝试更改 calendarday-container:hover .add-day-ico 中的边距，但无助于解决问题。

你能告诉我一个例子，我可以在悬停时阻止文本向下移动吗？

谢谢。

Answer 1

将边框的宽度从 1px 更改为 5px 并重新计算内部部分不是一个实用的解决方案。你可以使用一个额外的元素，它有 5px 的透明边框，并在悬停时将其更改为 5px 的彩色边框。

另一个简单的解决方案是改用outline，因为它不会增加元素尺寸：

.calendar-content {
  width: 81%;
  display: block;
  padding: 0;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 150px;
}

.calendarday-container {
  width: 139px;
  height: 139px;
  float: left;
  position: relative;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid #ccc;
}

.calendarday-container:hover {
  outline: 5px solid #2e7ad1;
}

.calendarday-add .calendarday-number {
  display: inline-block;
  width: 100%;
  font-size: 80px;
  color: #f1f1f1;
  margin: 12px 0px;
  text-align: center;
}

.add-day-ico {
  opacity: 0;
  width: 21px;
  height: 21px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.calendarday-container:hover img {
  opacity: 1;
}

<div class="calendarday-container" data-day="0" data-dropable="true">
  <a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
    <span class="calendarday-number">0</span>
    <img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class="add-day-ico">
  </a>

</div>

Answer 2

在悬停时显示边框的典型方法是使非悬停状态为透明或与背景匹配的颜色以及与悬停时边框的宽度匹配的颜色。

在这种情况下，有一个现有的1px 边框。在这里，我将灰色边框更改为蓝色，然后使用插入的box-shadow 来添加边框的额外4px。

注意：我还删除了悬停时.calendarday-number 的一些边距，因此数字不会改变。

.calendar-content {
  width: 81%;
  display: block;
  padding: 0;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 150px;
}

.calendarday-container {
  width: 139px;
  height: 139px;
  float: left;
  position: relative;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid #ccc;
}

.calendarday-add .calendarday-number {
  display: inline-block;
  width: 100%;
  font-size: 80px;
  color: #f1f1f1;
  margin: 12px 0px;
  text-align: center;
}

/* 
.calendarday-number:hover {
  margin: 12px 2px;
}
*/

.calendarday-container:hover {
  border-color: #2e7ad1;
  box-shadow: inset 0 0 0 4px #2e7ad1;
}

.add-day-ico {
  display: none;
  width: 21px;
  height: 21px;
  margin: 22px 0px;
  float: right;
}

.calendarday-container:hover .add-day-ico {
  display: block;
  margin: 22px 0px;
}

<div class="calendarday-container" data-day="0" data-dropable="true">
  <a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
    <span class="calendarday-number">0</span>
    <img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
  </a>

</div>

Answer 3

添加这个：

.calendarday-container {
        border: 5px solid transparent;
        outline: 1px solid #ccc;
        outline: none;
   }

.calendarday-container:hover {
        outline: none;
   }

删除这个：

.calendarday-number:hover {
       margin: 12px 2px;
  }

Answer 4

文本向下移动是因为，悬停时border-width 从1px 增加到5px。

您可以使用outline 属性在框周围保持轮廓，并在悬停时保持border: 5px solid transparent 到border: 5px solid #2e7ad1。

为了更好地理解，我为你创建了一个工作小提琴：Link to Jsfiddle

Answer 5

您可以使用这样的伪元素。我还删除了许多相互争斗的不必要的 css

* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }

/* Normal */
.calendarday-container { 
	width: 150px; height: 150px; 
	position: relative; 
	display: flex; align-items: center; justify-content: center; 
}
.calendarday-container:after { 
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
	border: 1px solid #ccc; z-index: -1; 
}

.caldndarday-add 	{ text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico 		{ width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }

/* Hover FX */
.calendarday-container:hover:after 					{ border: 10px solid navy; }
.calendarday-container:hover .calendarday-number 	{ color: navy; }

<div class="calendarday-container" data-day="0" data-dropable="true">
	<a class="caldndarday-add" href="/autoresponder/create_day.php?day=0" data-action="click">
		<span class="calendarday-number">0</span>
		<img class="add-day-ico" src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
	</a>
</div>