Question

当其中一个链接悬停时，剩余的元素会稍微移动到悬停链接上font-weight的更改左侧。

这就是我试过的

HTML

<div id="footer"> &copy; GreatService <a href="">Terms</a>&middot;<a href="">Privacy</a>&middot;<a href="">Legal</a>&middot;<a href="">Company</a>&middot;<a href="">Media</a>&middot;<a href="">Technology</a>&middot;<a href="">FAQ</a> &middot; Made with <span>&hearts;</span>. Enjoy!</div>

CSS

    #footer {
      position: absolute;
      bottom: 20px;}

    #footer, #footer a {
      color: #fff;}

    #footer a {
      margin-left: 5px;margin-right:5px;text-decoration: none;padding-left: 3px;padding-right: 3px;
    }
    #footer a:hover {
      font-weight: 700;

    }
    #footer a:hover a{padding-left: 2px; }

    #footer span {
      color: red;}

任何方法都可以防止其他元素的晃动，所以看起来好像在其自己的位置强调悬停链接而不会对其他非徘徊链接的位置造成任何干扰？

http://jsfiddle.net/sjeojvos/

Answer 1

您可以复制该元素并更改position: absolute

上的:hover

HTML：

<div>
    <span class="body">Link 1</span>
    <span class="shadow">Link 1</span>
</div> *

CSS：

div{
    display: inline-block;
    font-size: 32px;
}

div:hover .body{
    font-weight: bold;
    position: absolute;
}

div:hover .shadow{
    display: initial;
}

.shadow{
    color: white;
    display: none;
}

小提琴：http://jsfiddle.net/1bdmgt8n/2/

CSS悬停状态 - 防止其他元素的混乱

1 个答案: