如何在悬停时停止框的移动？答案

【问题标题】：How to stop the movement of box on hover?如何在悬停时停止框的移动？
【发布时间】：2022-01-20 13:06:04
【问题描述】：

我有一个盒子，里面有 READ MORE 文本。这是它的fiddle。悬停时，框向右移动。我想知道这背后的原因是什么？ How can I stop its movement ?

下面是我的css代码：

.chrisdavenport-middle24-text{
   position: absolute;
    top: 290px;
    /* font-style: italic; */
    font-family: "Adelle PE";
    padding-right: 200px;
    /* font-size: 16px; */
    padding-left: 200px;
    border-style: solid;
    padding-top: 10px;
    padding-bottom: 10px;
   color: orange;
    line-height: 1.379;
    font-size: 16px;
    font-family: "Adelle PE";
   color: red;
    right: 35px;
    letter-spacing: 0.300em;
}

.chrisdavenport-middle24-text:hover {
    font-weight: bold;
    font-style: italic; 
}

【问题讨论】：

这个css是文本的，你能显示盒子的css代码吗
stackoverflow.com/q/556153/3597276
@AkhilTrivedi 这是我唯一的 CSS，你可以查看我的 jsfiddle 示例。

标签： html css hover

【解决方案1】：

框没有移动，只是变宽了一点（右对齐，所以左边框向左一点）。这是因为粗体和斜体字体比常规字体占用更多的水平空间。

为避免这种情况，您可以在框上使用固定宽度：擦除 padding-right 和 padding-left，并为其指定 text-align: center 和适当的 width 设置。

这是相应的小提琴：https://jsfiddle.net/ghwzzyjy/1/

【讨论】：

【解决方案2】：

框实际上并没有移动，它只是变宽了，因为您正在更改字体的粗细和样式。要解决此错误，您只需为段落标签分配一个“宽度”属性，或者通过给它一个“左”属性来暗示该宽度，以补充您在上面已经使用的“右”对应物。这样做会限制它的宽度并阻止盒子改变大小。

.chrisdavenport-middle24-text{
  position: absolute;
  top: 290px;
  left: 0;
  right: 0;

  padding: 10px 200px;

  font-family: "Adelle PE";
  line-height: 1.379;
  font-size: 16px;
  letter-spacing: 0.300em;
  text-align: center;

  border-style: solid;
  color: red;
}

.chrisdavenport-middle24-text:hover {
  font-weight: bold;
  font-style: italic;
}

https://jsfiddle.net/csybh5ze/3/

【讨论】：

【解决方案3】：

你可以在代码中使用text-indent: 12px。

【讨论】：