在悬停时显示 div(固定位置和溢出隐藏父级)
Posted
技术标签:
【中文标题】在悬停时显示 div(固定位置和溢出隐藏父级)【英文标题】:show div on hover (fixed position and overflow hidden parent) 【发布时间】:2014-10-10 03:53:28 【问题描述】:有一个固定侧边栏的网站,高度为 100%。当您将鼠标悬停在占位符 img 上时,您可以看到下拉菜单。有一个项目叫 HOVER ME AND SEE。当您将鼠标悬停在它上面时,我想向您展示一些带有 .hidden-nav
类的块,其高度为 100%,宽度为 200px,位于固定侧边栏附近。我在<li>
中创建了那个 div 并查看,但它出现在固定侧边栏上的水平滚动..
这是我想要的屏幕
<aside class="fixed-col">
<div class="fix-wrap cf">
<div class="fixed-col-inner">
<h1>lorem</h1>
<div class="menu-button">
<a href="#" onclick="return false"></a>
</div><!-- menu-button -->
<input type="text" id="search" placeholder="...">
<button class="search-button"></button>
<div class="fav-wrap">
<a href="#" class="fav">ipsum (0)</a>
</div><!-- fav-wrap -->
<div class="menu-side">
<img src="http://placehold.it/31x31" >
<a href="#" class="username">xxx xxx</a>
<a href="#" class="logout">xxx</a>
<ul class="main-nav">
<li><a href="#">lorem</a></li>
<li><a href="#" class="add">ipsum</a></li>
<li class="last-li"></li>
</ul>
<ul class="second-nav">
<li>
<a href="#">HOVER ME AND SEE</a>
<div class="hidden-nav">
some content here
</div><!-- hidden-nav -->
</li>
<li><a href="#">amet</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div><!-- menu-side -->
<ul class="social">
<li class="facebook"><a href="#"></a></li>
</ul>
</div><!-- fixed-col-inner -->
</div>
</aside><!-- fixed-col -->
css
html, body
margin: 0;
height: 100%;
.fixed-col
width: 290px;
height: 100%;
position: fixed;
left: 0;
background: url(../img/menu-bg.jpg) no-repeat;
background-size: 100% 100%;
overflow-y: auto;
overflow-x: hidden;
.fix-wrap
background: rgba(0, 0, 0, 0.8);
min-height: 100%;
.fixed-col-inner
height: 100%;
position: relative;
.fixed-col-inner h1
margin: 0;
font: 24px/90px Arial;
color: #fff;
margin-left: 30px;
.menu-button
width: 36px;
height: 32px;
position: absolute;
background: rgba(0, 0, 0, 0.6);
right: 30px;
top: 30px;
border-radius: 2px;
.menu-button a
display: block;
background: url(../img/menu-button-bg.png) center center no-repeat;
width: 36px;
height: 32px;
.menu-button:hover
background: #5b5c5b;
.fixed-col-inner input
width: 230px;
height: 40px;
border: none;
background: rgba(0, 0, 0, 0.4);
outline: none;
color: #c4c4c4;
margin-left: 30px;
padding: 0 40px 0 15px;
button.search-button
width: 17px;
height: 17px;
display: block;
border: none;
outline: none;
background: url(../img/search-icon.png) center center no-repeat;
position: absolute;
right: 46px;
top: 101px;
cursor: pointer;
.fav-wrap
text-align: center;
margin: 25px 30px 0;
border-bottom: 1px solid #51504f;
padding-bottom: 30px;
background: url(../img/star.png) 30% 7% no-repeat;
a.fav
display: inline-block;
padding-left: 27px;
color: #fff;
text-decoration: none;
font: 14px Calibri;
a.fav:hover
text-decoration: underline;
.menu-side
padding-top: 25px;
.menu-side img
max-width: 31px;
max-height: 31px;
display: block;
margin: 0 auto 10px;
.username
display: table;
margin: 0 auto;
font: 14px Calibri;
color: #fff;
text-decoration: none;
.username:hover, .logout:hover
text-decoration: underline;
.logout
display: table;
margin: 8px auto 0;
font: 12px Calibri;
color: #84e5df;
text-decoration: none;
.main-nav
margin: 15px 0 0 0;
padding: 0;
list-style-type: none;
.main-nav li
display: block;
.main-nav li:hover
background: #4d4d4d;
.main-nav li a
font: 14px/39px Calibri;
color: #f5f5f5;
text-decoration: none;
display: block;
background: url(../img/paper-empty.png) left center no-repeat;
padding-left: 30px;
margin-left: 30px;
.main-nav li a.add
background: url(../img/paper-add.png) left center no-repeat;
.last-li
margin: 15px 30px 0;
border-bottom: 1px solid #51504f;
.second-nav
margin: 0;
padding: 0;
list-style-type: none;
max-height: 0px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all .5s ease;
.second-nav li
display: block;
.second-nav li:first-child
margin-top: 15px;
.second-nav li:hover
background: #4d4d4d;
.second-nav li a
font: bold 16px/39px Calibri;
color: #f5f5f5;
text-decoration: none;
display: block;
padding-left: 30px;
.menu-side:hover .second-nav
max-height: 5000px;
opacity: 1;
visibility: visible;
overflow: visible;
.social
margin: 30px 30px 0 30px;
padding: 0;
text-align: center;
.social li
display: inline-block;
vertical-align: middle;
margin: 0 5px;
.social li a
vertical-align: middle;
.facebook a
background: url(../img/facebook-ico.png) center center no-repeat;
display: block;
width: 10px;
height: 18px;
.vk a
background: url(../img/vk-ico.png) center center no-repeat;
display: block;
width: 24px;
height: 14px;
.hidden-nav
width: 206px;
height: 500px;
position: absolute;
top: 0;
left: 290px;
background: black;
和JsFiddle LINK
我的侧边栏必须是 100% 的高度并且是固定的,带有overflow-y: auto
可能我可以用 js 或任何其他解决方案来做到这一点?请帮忙。谢谢。
【问题讨论】:
this example 是你想要达到的目标吗? @misterManSam 是的,但是当尝试悬停它时它会消失。我认为是因为滚动条,我该怎么办? 好的,我让它工作了in this example。现在的问题是滚动条,是的:) 如果有滚动条,它会挡住,div 就会消失。 好的,我已经这样做了,非常感谢!)关于滚动条的问题可能我需要在这里创建新问题) 【参考方案1】:我没有使用你的 css/html 结构,但这里是你想要的一个粗略的想法:
-
垂直导航的固定位置
将鼠标悬停在父级上并显示子级 ul
如果页面太短,则自动滚动,以便可以访问父项和子项。
演示:http://jsbin.com/pudiy/1/edit
CSS(注意这些只是演示 CSS,并不具体)
html,
body
padding: 0;
margin: 0;
height: 100%;
nav
width: 300px;
box-sizing:border-box;
padding:20px 0;
height: 100%;
background: #000;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
ul
list-style: none;
margin: 0;
padding: 0;
li
padding: 0;
margin: 0;
.main li a
color: #fff;
display: block;
padding: 8px 20px;
.main li:hover
background: red
.main ul
display: none;
nav:hover
overflow: auto;
background: #000;
z-index: 1000; /* this may not be necessary */
.main li:hover ul
top: 0;
padding:20px 0;
box-sizing:border-box;
height:100%;
display: block;
position: fixed;
left: 270px; /* if you put it at 300 the scrollbar will break the hover */
width: 200px;
overflow: auto;
bottom: 0px;
z-index: 99;
background:#333;
HTML
<nav>
<ul class="main">
<li><a href="#">Link</a></li>
<li><a href="#">Hover Me 1</a>
<ul>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child last</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Hover Me 2</a>
<ul>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child last</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
注意事项:
这不是响应式的,您需要设置最小宽度并以不同的方式构建您的移动菜单。 :hover 在触摸时无法识别。 ios会把它变成点击,但是Andriod我不知道,我倾向于对触摸和非触摸设备都使用点击,这样可以避免痛苦。
【讨论】:
【参考方案2】:HTML
<section id="container">
<aside id="leftwrap">
<section id="hovertest">hover over me</section>
<section id="hoverbelow">something below</section>
</aside>
<main id="content">
<section id="overlay"></section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis quam in ullamcorper egestas. Maecenas aliquet tempus ligula, at vulputate libero mattis at. In
</main>
<section>
jQuery
$('#hovertest').on('mouseenter',function()
$('#overlay').css('display','block');
);
$('#overlay').on('mouseleave',function()
$(this).hide();
);
$('#hoverbelow').on('mouseenter',function()
$('#overlay').hide();
);
这是Fiddle
【讨论】:
【参考方案3】:这样做的唯一方法是将:hover
操作设置为向下传播到 DOM 的子级
这意味着你必须将你的 html 重构为表单:
<div class="parent">
<div id="child1">
Child 1
</div>
<div id="child2">
Child 2
</div>
</div>
然后在你的 css 中:
.parent:hover #child1
/* Change style here*/
这样,将鼠标悬停在父级上,您可以更改其子级的样式。
但是,您不能将“child1”的样式从:hovering
其兄弟“child2”更改。
如果您需要将sibling's
样式更改为:hovering
,那么您需要使用JS。
【讨论】:
我已经这样做了。我在 内创建整个块.hidden-nav
并在悬停该 <li>
时调用块。但是块是不可见的,因为带有overflow-x: hidden;
的侧边栏如果我设置overflow-x: visible
,它会为我的侧边栏显示水平滚动。以上是关于在悬停时显示 div(固定位置和溢出隐藏父级)的主要内容,如果未能解决你的问题,请参考以下文章