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。

Answer 2

我试图尽可能少地更改原始标记，以说明您将如何使用现有的CSS来完成此任务。我确实必须更改菜单项的顺序，因为我删除了浮动控件。通常，对于放置这样的菜单项，您可能不想使用float。您将需要做很多clearfix工作，如果不使用CSS和标记，则可以用更少的CSS和标记来完成更多工作。

我还要指出，从语义的角度来看，您可能不想在菜单上使用h3标签。我建议您将菜单设置为<nav>标签，然后将锚定链接包装在其中，并可能在导航栏中添加<ul>。

可以用更少的标记和CSS来完成整个布局。同样，我正在尝试更改尽可能少的标记，以使您到达要去的地方。

#welcome {
	float: left;
	margin-left: 30px;
}


#accountop {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    transition: transform 300ms ease-in-out;
}

#accountdiv {
    background-color: red;
}

#accountdiv:hover > #accountop {
    transform: translateX(-100%);
}

.account {
	float: right;
	margin-right: 30px;
	margin-top: 30px;
	color: black;
}

.account-item {
	margin-top: 30px;
	color: black;
	background-color: lightgray;
	margin-left: 0;
	margin-right: 0;
	margin-top: 25px;
	padding: 5px 10px 5px 10px;
    display: inline-block;
}

.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">Dashboard</h3>
                        <h3 class="account-item">Settings</h3>
						<h3 class="account-item">Logout</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>

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

2 个答案: