Question

我有一个包含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; 
}

Answer 1

盒子不动，它只是稍微宽一点（右对齐，所以左边框稍微向左移动）。由于粗体和斜体字体比普通字体占用更多的水平空间。

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

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

Answer 2

盒子实际上并没有移动，它只是变宽，因为你正在改变字体的重量和样式。要解决此错误，您只需要为段落标记指定一个“宽度”属性，或者通过赋予它“左”属性来暗示该宽度，以补充您上面已经使用的“正确”对应物。这样做会限制它的宽度并阻止盒子改变大小。

/etc/ld.so.preload

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

如何在悬停时停止盒子的移动？

2 个答案: