- 此问题在此处已有答案**:
CSS hover border makes elements adjust slightly(14个答案)
5天前关闭。
我有一个li
,样式如下:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
当我把鼠标悬停在li
上时,边框出现了,但是li
在移动。有没有可能让边框出现而不引起元素移动?就像有一个看不见的边框,然后悬停时让它出现一样?
9条答案
按热度按时间u4vypkhs1#
你可以用“透明”作为颜色,在IE的一些版本中,它显示为黑色,但是自从IE6时代以来我就没有测试过它。
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
dly7yett2#
很多人一定是想找到一个解决不透明边框而不是透明边框的方法,在这种情况下,可以使用
rgba
,其中a
代表alpha
。Demo
在这里,您可以将
border
的opacity
从0-1
更改为如果只是想要一个完全透明的边框,最好使用
transparent
,比如border: 1px solid transparent;
omjgkv6w3#
您可以删除边框并增加填充:
5us2dqdw4#
嘿,这是我经历过的最好的解决方案。。这是CSS3
使用下面的属性到你的div或任何地方你想把边界透明
例如:
这将工作..
jtw3ybtb5#
是的,您可以使用
border: 1px solid transparent
另一个解决方案是在悬停时使用
outline
(并将边框设置为0),这不会影响文档流:注意:你只能将轮廓设置为一个sharhand属性,而不是单独的边。它只用于调试,但它工作得很好。
hs1rzwqc6#
既然你在评论中说你有越多的选择越好,这里有另一个。
在CSS3中,有两种不同的所谓的“框模型”。一种添加边框和填充到块元素的宽度,而另一种不添加。您可以通过指定
然后,在现代浏览器中,元素将总是具有相同的宽度,即,如果你在悬停时应用一个边框,边框的宽度将不会添加到元素的总宽度中;可以说,边界将被添加到元素的“内部”。2然而,如果我没记错的话,你必须显式地指定
width
才能工作。3在这个特定的例子中,这可能不是你的选择,但是你可以在将来的情况下记住它。piv4azn77#
This blog entry可以在IE6中模拟
border-color: transparent
。下面的示例包括博客条目评论中提到的“hasLayout”修复:确保在IE6修复中使用的
border-color
没有在.testDiv
元素中的任何地方使用。我将示例从pink
更改为#FEFEFE
,因为它似乎更不可能被使用。ljo96ir58#
使用透明属性
hwamh0ep9#
最简单的解决方案是使用
rgba
作为颜色:border-color: rgba(0,0,0,0);
这是完全透明的边框颜色。