html - 如何使 div 的一部分隐藏在屏幕之外？

Question

我已经对此进行了调查，并找到了类似 this one, 的代码示例但是当我应用代码时，它要么不起作用，要么弄乱了我的布局。这是我当前的代码:

#welcome {
  float: left;
  margin-left: 30px;
}

.account {
  float: right;
  margin-right: 30px;
  margin-top: 30px;
  color: black;
}

.account-item {
  float: right;
  margin-right: 30px;
  margin-top: 30px;
  color: black;
  background-color: lightgray;
  margin-left: 0;
  margin-right: 0;
  margin-top: 25px;
  padding: 5px 10px 5px 10px;
}

.account-item:nth-child(3) {
  border-radius: 10px 0 0 10px;
}

.account-item:hover {
  background-color: gray;
}

#accountdiv img {
  margin-right: 5px;
  margin-top: 28px;
}

<div id="navbar">
  <h1 id="welcome">Hello, User!</h1>
  <div id="accountdiv">
    <div id='accountop'>
      <div id='accountap'>
        <h3 class="account-item">Logout</h3>
        <h3 class="account-item">Settings</h3>
        <h3 class="account-item">Dashboard</h3>
      </div>
    </div>

    <h3 class="account" id="account" class="tooltip">someone@example.com</h3>
    <img class="account" src="https://cdn0.iconfinder.com/data/icons/users-android-l-lollipop-icon-pack/24/user-512.png" width="25px" />
  </div>
</div>

我计划使用 jquery 让帐户元素(仪表板、设置、注销)在悬停时滑过。但我不太清楚我会首先将这些元素隐藏在屏幕之外。我尝试将 #accountdiv 的宽度设置为 122%，这将它隐藏在我的显示器上，但是当我切换到屏幕较小的显示器时，它又重新出现了。

我也尝试了上面链接的代码，但最终弄乱了 div 的布局(它将元素移到了屏幕的左侧，当我试图修复它时，它弄乱了它更多)。

感谢任何帮助。

Answer 1

不确定您想将鼠标悬停在哪个元素上，但此示例使用头像图像作为悬停:

CSS

#accountdiv {
    overflow:hidden;  
    position:relative;
}

#accountap {
    position:absolute;
    right:-20em;
}

#accountap {
   transition:all 0.5s;  
}

Javascript

$('img.account').hover(
    function () {
        $('#accountap').css('right', '0');
    }
);

HTML

 <div id='accountap'>
        <h3 class="account" id="account" class="tooltip">someone@example.com</h3>                   
        <h3 class="account-item">Logout</h3><h3 class="account-item">Settings</h3><h3 class="account-item">Dashboard</h3>            
 </div>
 <img class="account" src="https://cdn0.iconfinder.com/data/icons/users-android-l-lollipop-icon-pack/24/user-512.png" width="25px" />

最初菜单向右偏移 20em。将鼠标悬停在头像上时，jQuery 会将 CSS 规则更新为 0em。