悬停时显示div（固定位置和溢出隐藏的父元素）

Question

悬停时显示div（固定位置和溢出隐藏的父元素）

4

拥有一个固定侧边栏和100%高度的网站。当您将鼠标悬停在占位符图像上时，您可以看到下拉菜单。有一个名为“HOVER ME AND SEE”的项目。当您将其悬停在上面时，我希望显示具有类.hidden-nav的某些块，高度为100%，宽度为200px，并位于固定侧边栏附近。我在HOVER ME AND SEE的<li>内创建了该div，但会在固定侧边栏上出现水平滚动条。这是我想要的屏幕截图

Html

<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" alt="">
            <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;
}

我的侧边栏必须是100%高度和固定的，并带有 overflow-y: auto 。也许我可以用js或其他解决方案来实现它？请帮忙，谢谢。

和JsFiddle链接

- CroaToa

1

这个编程示例（http://jsbin.com/gipawa/1/edit）是你想要实现的吗？ - misterManSam

@misterManSam 是的，但当尝试悬停时它会消失。我认为这是由于滚动条，我该怎么办？ - CroaToa

1

好的，所以我已经在这个例子中使它工作了（http://jsfiddle.net/20zxfn6r/3/show/）。现在的问题是滚动条，是的 :) 如果有滚动条，它会挡住并隐藏div。 - misterManSam

好的，我已经做到了，非常感谢！关于滚动条的问题，我可能需要在这里创建一个新的问题。 - CroaToa

3个回答

1

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：

- bhavya_w

0

唯一的方法是将您的: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*/
}

这样，当你悬停在父元素上时，你可以改变它的子元素的样式。然而，你不能通过:hovering兄弟元素"child2"来改变"child1"的样式。如果你需要在:hovering时改变一个兄弟元素的样式，那么你需要使用JS。

- codeMonkey89

我已经这样做了。我在<li>标签内创建整个.hidden-nav块，并在悬停时调用该块。但是，由于侧边栏使用了overflow-x: hidden;，所以该块是不可见的。如果我将overflow-x: visible设置为可见，则会出现我的侧边栏的水平滚动条。 - CroaToa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christina · Accepted Answer

我没有使用你的CSS/HTML结构，但是这里有一个大致的想法：

垂直导航的位置固定
将鼠标悬停在父级上时，显示子级ul
如果页面太短，则滚动是自动的，以便可以访问父级和子级项目。

演示：http://jsbin.com/pudiy/1/edit

CSS（请注意，这些只是演示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我不知道，我倾向于在触摸和非触摸设备上都使用点击来避免痛苦。