你能做出"一个无形的边界"吗？

Question

我正在尝试将导航栏作为练习.

我正在使用a:hover悬挂按钮周围的实心边框.但是,这会使所有其他按钮按边框大小移动.

这个问题的正确解决方法是什么？我知道还有其他的(这里讨论过),我特意试图让边界"看不见,但即使没有徘徊也要占用空间".我border:transparent希望它可以做我想要的,但它根本没有显示占用空间.

我知道我可以手工挑选边框的颜色等于背景并使其坚固,但这不是我想要的.有没有理智的方法来解决这个问题？

Answer 1

怎么样border: 10px solid transparent？

Answer 2

您最好的选择是为元素添加填充或边距,其大小与边框相同,并使边框的宽度为零,然后显示边框并使用a:hover选择器删除填充.

这是一个样本.您也可以使用边距来执行此操作.

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}

<a href="#">Hello World</a>

Answer 3

一个原因这是行不通的,你会想到的是,因为你只申请display:block上:hover,它需要被应用到元素而不:悬停选择,否则你会得到"转向"的尺寸.使用哪种显示类型并不重要,您只需确保它们是相同的,默认情况下<a>是内联的.

另一个原因与您的速记边框有关,您需要为透明版本添加边框类型,solid而不是none.

您使用的技术是完全合法的,不需要填充黑客或大纲(不添加维度).

http://jsfiddle.net/Madmartigan/kwdDB/

试试这个:

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}