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

Question

我对这种现象感到困惑，当我将鼠标悬停在它上面时，我的旋转文本似乎移动了位置，我不确定如何解决它。这就是我的意思:http://jsfiddle.net/99o3ru7a/

HTML:

<div id= "social">
    <ul>
        <li><a href="#">Behance</a></li>
        <li><a href="#">The Loop</a></li>
        <li><a href="#">Linkedin</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</div><!--social-->

CSS:

#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;
}

Answer 1

您只是在悬停时向 anchor 标记添加了 padding 和 border-bottom，这实际上增加了元素的整体高度，因此您会看到悬停期间的位移。

要解决此问题，您可以将 border-bottom 和 padding 添加到未悬停状态本身，如下所示:

#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;
}

将 transparent 设置为 border-bottom 的颜色意味着即使 border-bottom 存在，也不会在屏幕上看到任何内容当链接没有悬停时。当您悬停时，颜色将更改为 红色，但它的高度将保持不变，因为即使在非悬停状态下它也确实有一个 3px 的边框(这是透明的)。

#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;
  border-bottom: 3px solid transparent;
  padding: 0 0 5px 0;
}
#social a:hover {
  border-bottom: 3px solid #F00;
  display: inline-block;
}

<div id="social">
  <ul>
    <li><a href="#">Behance</a>
    </li>
    <li><a href="#">The Loop</a>
    </li>
    <li><a href="#">Linkedin</a>
    </li>
    <li><a href="#">Twitter</a>
    </li>
  </ul>
</div>
<!--social-->