时间戳

首页 > 解决方案 > 悬停时更改项目位置

html - 悬停时更改项目位置

问题描述

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

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

当导航栏聚焦时，我希望将 div#content 缩小 11rem（以便扩展的导航栏不在 div#content 之上）。

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

标签： htmlcssnavbarresponsive

解决方案

为此，您可能需要 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>

推荐阅读