代码之家 › 专栏 › 技术社区 › Rishit Shah

HTML悬停边框当我们悬停所有其他元素移动时如何解决这个问题?

border hover css html

Rishit Shah · 技术社区 · 7 年前

下面我写的HTML代码中有问题当我们在悬停中向元素添加边框时,问题就出现了,您可以看到所以问题是如何摆脱移动元素,我们只希望rest元素保持静止在我的许多网页中,这个问题都会出现因此,请帮助我详细回答原因,而不仅仅是解决这个特定的代码
https://codepen.io/shahrishit9/pen/aEdJWa?editors=1100 在这个codepan中,我们也可以看到同样的事情发生请检查一下

body{background-color:pink;font-family-arial;font-size:1.10em;}
#para{
margin:0px 50px 30px 50px;}
#footerMenu {text-align:center;}
#creator{text-align:center;}
a{padding:0px 10px;margin:10px;text-decoration:none;color:black;}
a:hover{border: solid 2px lightblue;}

<HTML lang ="en">
  <head>
    <title>
      My new footer
    </title>
    <meta charset = utf-8>
  </head>
  <body>
    <div>
      <section id="para">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </section>
      <footer>
      <section id="footerMenu">
        <a href=https://www.instagram.com/>Instagram</a>
        <a href=https://www.facebook.com/>Facebook</a>
      <a href=https://www.twitter.com/>Twitter</a>
    <a href="">Site Map</a>
    
      </section>
<section Id="creator">
         design and code by Rishit Shah
  </section>
      </footer>
    </div>
    
  </body>
  </HTML>

2 回复 | 直到 7 年前

Suresh Ponnukalai 7 年前

这是因为添加边框时,元素的高度会额外增加2倍。这个额外的高度就像元素移动了一点。可以先为元素应用透明边框,然后在悬停时应用实际边框。这样,就不会在元素位置上得到微分。

li {
   line-height:10px;
   display:block;
   padding:10px;
   max-width:150px;
   text-align:center;
   margin:10px; 
   border:1px solid transparent;
}

DEMO

Tim Rutter 7 年前

更改如下:

a{border:solid 2px transparent;} // Add this with your other css property.
a:hover{
  border-color: lightblue;
}

Codepen link

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前