首页 文章

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

提问于
浏览 次
0

当其中一个链接悬停时，剩余的元素稍微移动到悬停链接上的 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/

html css html5 css3 font-size

1 回答

  • 1

    您可以复制元素并更改 :hover :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/

    回复于

相关问题