为啥当鼠标悬停后出现边框时 <div> 的大小会增加? CSS [重复]

Posted

技术标签:

【中文标题】为啥当鼠标悬停后出现边框时 <div> 的大小会增加? CSS [重复]【英文标题】:Why would a <div> inscrease in size when a border shows up after the mouse hovers it? CSS [duplicate]为什么当鼠标悬停后出现边框时 <div> 的大小会增加? CSS [重复] 【发布时间】:2022-01-18 17:38:24 【问题描述】:

我正在构建一个导航栏并尝试像在 bbc.com 网站中那样做 - 当鼠标悬停在某个项目上时,会出现一个彩色边框。我使用类似的东西来做到这一点

* 
        box-sizing: border-box;
        margin: 0;
        padding: 0;
         
    
    .cont 
        display:flex;
        border: 1px solid gray;
        background-color: black;
    
    
    a 
        margin-right:0.1em;
        border: 1px gray;
        border-style: none none none solid;
        padding: 0.5em;
        color: white;
    

    #nav2:hover 
        border-bottom: 3px solid red;
        cursor:pointer;
    
    
    #nav4 
        border-style: none solid none solid;
        margin-right: 5em;
    
        <div class="cont">
        <a id="nav1">Home</a>
        <a id="nav2">News</a>
        <a id="nav3">Contact</a>
        <a id="nav4">About</a>
        <button id="button1">Sign in</button>
        </div>

但是当您将鼠标放在#nav4 项目上时,整个黑色背景会拉伸以显示红色边框。为什么会这样?我想'box-sizing:border-box;'应该阻止它。

(第二点,我怎样才能将按钮放在页面的右上角,使其适用于任何尺寸的屏幕?)

【问题讨论】:

【参考方案1】:

我在伪元素之后使用绝对定位而不是使用border

记住Box model 边框在内容之外。

codepen

【讨论】:

【参考方案2】:

添加边框时,您添加到元素的高度。

有两种方法可以避免这种情况:

    为每个元素添加一个 3px 的黑色边框,并且只改变它的颜色:hover

    指定box-sizing: border-box; 和一个高度,所以元素的 高度包括边框(和填充)

【讨论】:

感谢您的回答。但是代码中已经指定了边框框。为什么边框仍然会增加框的高度,因为边框框应该告诉它应该在框内? @Jonas 您需要指定高度才能使 box-sizing 起作用【参考方案3】:

这是一个只使用边框 css 的方法:

* 
  box-sizing: border-box;
  margin: 0;
  padding: 0;


.cont 
  display: flex;
  border: 1px solid gray;
  background-color: black;
  /* font-family: Arial, Helvetica, sans-serif; */
  /* height: 2em; */
  /* border-radius:5px; */


a 
  margin-right: 0.1em;
  border: 1px gray;
  /* border-style: none none none solid; */
  border-bottom: 3px solid black;
  border-top: 3px solid black;
  padding: 0.5em;
  color: white;



/* #nav1 
        border-style: none none none solid;
        margin-left: 3em;
     */

#nav2:hover 
  /* border: 3px solid red; */
  border-bottom: 3px solid red;
  cursor: pointer;


#nav4 
  /* border-style: none solid none solid; */
  margin-right: 5em;
<div class="cont">
  <a id="nav1">Home</a>
  <a id="nav2">News</a>
  <a id="nav3">Contact</a>
  <a id="nav4">About</a>
  <button id="button1">Sign in</button>
</div>

【讨论】:

以上是关于为啥当鼠标悬停后出现边框时 <div> 的大小会增加? CSS [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何在鼠标悬停时更改边框粗细

鼠标悬停时隐藏组合框边框

CSS鼠标悬停图片加边框效果,不位移的方法

悬停背景显示不正确?

当鼠标悬停在边框上时,如何完全禁用调整窗口大小,包括调整大小图标?

html鼠标悬停图片边框出现