Question

我为我的网站设置了一些链接，这样当鼠标悬停在链接上时，文本会突出显示。但是，即使鼠标悬停，链接也会移动。我能做些什么来解决这个问题吗？

注意：下划线和文本之间的距离必须为.10em，下划线厚度必须为.15em。

下面是代码：

.selected_works {
    color: #292929;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
    position: fixed;
    top: 100px;
    right: -20px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    text-decoration: none;
    z-index: 999;
}

.selected_works:hover {
    border-bottom: .15em solid #292929; 
    padding-bottom: .10em;
}

.selected_works:active {
    text-decoration: none;
    border-bottom: .15em solid #292929; 
    padding-bottom: .10em;
}

谢谢！

Answer 1

因为悬停风格。

这是一个没有边框+填充的演示。看看它是如何移动的。

CSS：

.selected_works:hover {
    color: red;
}

DEMO WITHOUT

现在有一个风格的演示：

CSS：

.selected_works:hover {
    border-bottom: .15em solid #292929; 
    padding-bottom: .10em;
}

DEMO WITH

使用样式，您可以使用边框和填充来推送文本。因此随着规模的变化它会移动。

WORKING DEMO

Answer 2

此处我们添加了<span＆gt;所以你可以：悬停文字装饰：边框;没有移动

http://jsfiddle.net/FCtTm/2/

<div class="selected_works"><span>Testing</span></div>

<style type="text/css">
.selected_works:hover span {
    border-bottom: .15em solid #292929; 
    padding-bottom: .10em;
}

.selected_works:active span  {
    text-decoration: none;
    border-bottom: .15em solid #292929; 
    padding-bottom: .10em;
}
</style>

当鼠标悬停时，程式化的悬停链接会移动

2 个答案:

CSS：

CSS：