如何阻止js创建边界来影响其他元素？

我的网站有一个水平菜单，里面的物品没有边框。但我希望它在鼠标悬停上有1px边框，所以当我将鼠标移动到它上面时，这个新创建的边框将其他元素向左移动约2px（因为 = = 1px）。如何阻止js创建边界来影响其他元素？

这是我的代码

<div id="library_category_wrapper"> 
    <ul> 
     <li><a href="#">Item1</a></li> 
     <li><a href="#">Item1</a></li> 
     <li><a href="#">Item1</a></li> 
     <li><a href="#">Item1</a></li> 
    </ul> 
</div>

，这是CSS

#library_category_wrapper ul 
    { 
     list-style: none; 
     float: right; 
     position: relative; 
     top:5px; 
     margin: auto; 
    } 

#library_category_wrapper ul li 
    { 
     display: inline; 
     margin-left:8px; 
     padding : 4px; 
    } 

#library_category_wrapper li:hover 
    { 
     background: none repeat scroll 0 0 rgba(0, 0, 0, 0); 
     border : 1px solid rgba(0, 0, 0, 0.25); 
     border-radius : 4px 4px 4px 4px; 
     box-shadow : 0 0 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1); 
     text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.796), 0 0 10px rgba(255, 255, 255, 0.298); 
     padding : 4px; 
    }

这是DEMO

来源

2013-10-08 Drupalist

你可以添加一个“透明”的边界为默认澧州：

#library_category_wrapper ul li { 
    border: 1px solid transparent; 
}

演示：http://jsfiddle.net/Pn8uw/2/

来源

2013-10-08 15:13:41 opznhaarlems

您可以简单地把一个透明边框上正常状态下是这样的：http://jsfiddle.net/Pn8uw/1/

#library_category_wrapper ul li { 
    border : 1px solid rgba(0, 0, 0, 0); 
}

来源

2013-10-08 15:13:39

@opznhaarlems的回答达到了同样的事情，但有更好的浏览器的支持，所以最好去这一点。 – CherryFlavourPez

@CherryFlavourPez，穆罕默德已经在原来的CSS中使用rgba，所以没有理由不使用它。 –

好吧，在没有其他选择的地方。在这里，“transparent”以更一致的方式实现*精确*相同的事物。那么你为什么不使用它？ – CherryFlavourPez

您可以简单地减小悬停填充。添加下面的属性，而不是你的填充：4px;

#library_category_wrapper li:hover { 
    padding: 3px; 
}

fiddle

来源

2013-10-08 15:17:02 jbarnett

添加透明边框的其他答案正在修改默认的LI状态。在默认的LI状态下，你基本上有5px的填充，而不是4px。如果您确实想要为默认状态保留4px的相同填充，则需要将默认状态填充减少1px并使用透明边框，或将悬停状态填充减少到3px以匹配默认状态。 – jbarnett

如何阻止js创建边界来影响其他元素？

回答

相关问题