停止悬停时向下移动文本

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：https://bugs.openjdk.java.net/browse/JDK-8212926

我尝试更改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>