悬停时更改项目位置

【问题标题】：change item positioning when something's hovered悬停时更改项目位置
【发布时间】：2021-05-23 11:44:23
【问题描述】：

所以，我的页面左侧有一个垂直导航栏，当它悬停时，我将它从小到大。基本上，从只显示图标到还显示几个单词，标准的东西。但是，它的工作方式，当它扩展时，它会在网站的其余部分增长。有没有办法让它也调整网站的其余部分（仅在悬停时）所以它不会隐藏任何内容？布局如下：

<body>
  <navbar></navbar>
  <div id="content">
    <main>
      <div></div>
      <img />
      <div></div>
    </main>
    <footer></footer>
  </div>
</body>

当导航栏被聚焦时，我希望 div#content 缩小 11rem（这样扩展的导航栏就不会位于 div#content 之上）。

导航栏在未对焦时为 5rem，在对焦时为 16rem。

【问题讨论】：

标签： html css navbar responsive

【解决方案1】：

您可能需要 JavaScript。请尝试以下操作：

let nav = document.getElementById("nav");
let content = document.getElementById("content");
let contentWidth = content.getBoundingClientRect().width;

nav.addEventListener("mouseover", mOver, false);
nav.addEventListener("mouseout", mOut, false);

function mOver() {
  content.style.width = `calc(${contentWidth}px - 11rem)`;
}

function mOut() {  
     content.style.width = contentWidth + 'px';
}

#nav{
cursor:pointer;
background-color:#f0f0f0;
}

.content{
/* Just a sample width for demonstration */ 
width:20rem; 
background-color:red;
}

<body>
  <navbar id="nav">NavBar: Hover Here</navbar>
  <div id="content" class="content">
    <main>
      <div></div>
      <img />
      <div></div>
    </main>
    <footer></footer>
  </div>
</body>

【讨论】：