悬停时更改项目定位

Question

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

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

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

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

Answer 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>

悬停时更改项目定位

change item positioning when something's hovered

html

css

navbar

responsive