Css 当我将光标悬停在旋转的文本上时，它会跳转

我对这种现象感到困惑，当我将鼠标悬停在旋转的文本上时，它似乎移动了位置，我不知道如何修复它。我的意思是：

HTML:

---

你需要确定#社交的高度：

---

仅在进行悬停时，才将

填充

和

边框底部

添加到锚定标记中，这实质上增加了元素的总体高度，因此在

悬停

期间会看到位移

要解决此问题，您可以将

边框底部

和

填充

添加到未悬停状态本身，如下所示：

#social a {
    color:#F00;
    margin:0 20px 0 20px;
    float:left;
    font-weight:bold;
    font-style:italic;
    font-size:1.5em;
    border-bottom:3px solid transparent;
    padding: 0 0 5px 0;
}

将

透明

设置为

边框底部

的颜色意味着，即使

边框底部

存在，当链接未悬停时，屏幕上也看不到任何内容。当您悬停时，颜色将更改为红色，但所需的高度将保持不变，因为即使在未悬停状态下，它也有一个3倍的边框（这是透明的）

#社交{
-ms变换：旋转（-90度）；
/*IE 9*/
-ms变换原点：左；
/*IE 9*/
-webkit变换：旋转（-90度）；
/*铬、狩猎、歌剧*/
-webkit变换原点：左；
/*铬、狩猎、歌剧*/
变换：旋转（-90度）；
变换原点：左；
位置：固定；
最高：75%；
左：30px；
宽度：100%；
}
#社会保险{
列表样式：无；
}
#社会的{
颜色：#F00；
利润率：0.20px 0.20px；
浮动：左；
字体大小：粗体；
字体：斜体；
字号：1.5em；
边框底部：3倍纯色透明；
填充：0 5px 0；
}
#社交a：悬停{
边框底部：3px实心#F00；
显示：内联块；
}

这是您想要的吗？

#social {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin:left; /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin:left; /* Chrome, Safari, Opera */
    transform:rotate(-90deg);
    transform-origin:left;
    position: fixed;
    top:75%;
    left:30px;
    width:100%;
}
#social ul {
    list-style:none;
}
#social a {
    color:#F00;
    margin:0 20px 0 20px;
    float:left;
    font-weight:bold;
    font-style:italic;
    font-size:1.5em;
}
#social a:hover {
    border-bottom:3px solid #F00;
    display:inline-block;
    padding: 0 0 5px 0;
}

#social {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin:left; /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin:left; /* Chrome, Safari, Opera */
    transform:rotate(-90deg);
    transform-origin:left;
    position: fixed;
    top:75%;
    left:30px;
    width:100%;
    height:40px;
}

#social a {
    color:#F00;
    margin:0 20px 0 20px;
    float:left;
    font-weight:bold;
    font-style:italic;
    font-size:1.5em;
    border-bottom:3px solid transparent;
    padding: 0 0 5px 0;
}