jQuery在导航上创建扩展div

Question

请使用以下代码段：

 .container { width: 150px; height: 100px; } .test { color: white; background-color: red; width: 100%; height: 25%; transition: height ease 1s; } .test:hover { height: 100%; } 

 <div class="container"> <div class="test">Hover Here</div> </div> 

容器内的简单div，将鼠标悬停时可扩展到100％。 我试图做的事情与此非常相似，但是在导航菜单中（类似于http://www.mineplex.com/ ）。

当用户将鼠标悬停在容器div （而不是主框本身）上方时，我需要主div的高度从0％扩展到100％ 。

我尝试使用JQuery使用没有运气的“ .hovered”类来解决此问题。 一个如何编码呢？

任何帮助深表感谢。 谢谢！

Answer 1

这是一个示范：

两个代码段之间的相似之处：

• 容器利用Flex展示制作一个响应式导航栏容器，其每个项目的宽度都超过20％（可以调整）。
• 每个项目（具有相对位置）都有两个子容器（具有绝对位置），第一个是叠加层，我们将其用于获取蓝色过渡背景（z-index：1），第二个具有固定的文本在正面（z-index：2）。
• 现在，z-index可以确保叠加层在后面进行过渡，文本在前面进行固定，要记住的另一件事是，因为我们是从下往上进行过渡，所以我们将bottom：0设置为在叠加层类以及高度：0％;上。
• 悬停时，我们将高度从0％转换为100％。

这两个代码段之间的差异：

• 在第一个代码段中，我们将使用.items:hover .overlay转换悬停时的每个项目。

• 而在第二个片段中，我们将使用.container:hover > *.items> .overlay （“>”是直接子选择器）在容器悬停时转换每个项目，而不是单个项目。

首先：将鼠标悬停在每个项目上以展开覆盖。

 .container { width: 100%; display: flex; height: 80px; background: gray; justify-content: center; align-items: center; } .items { flex: 0 1 20%; height: 100%; margin-right: 5px; position: relative; overflow: hidden; } .overlay { position: absolute; background: blue; z-index: 1; width: 100%; height: 0%; bottom: 0; transition: all 0.5s ease-in-out; } .item-text { position: absolute; text-align: center; color: white; z-index: 2; width: 100%; height: 100%; top: 0; } .items:hover .overlay { height: 100%; } 

 <div class="container"> <div class="items"> <div class="overlay"></div> <div class="item-text">Home</div> </div> <div class="items"> <div class="overlay"></div> <div class="item-text">About</div> </div> <div class="items"> <div class="overlay"></div> <div class="item-text">Contact</div> </div> <div class="items"> <div class="overlay"></div> <div class="item-text">Other</div> </div> </div> 

第二：当用户将鼠标悬停在容器上方时，展开所有叠加层。

 .container { width: 100%; display: flex; height: 80px; background: gray; justify-content: center; align-items: center; } .items { flex: 0 1 20%; height: 100%; margin-right: 5px; position: relative; overflow: hidden; } .overlay { position: absolute; background: blue; z-index: 1; width: 100%; height: 0%; bottom: 0; transition: all 0.5s ease-in-out; } .item-text { position: absolute; text-align: center; color: white; z-index: 2; width: 100%; height: 100%; top: 0; } .container:hover > *.items> .overlay { height: 100%; } 

 <div class="container"> <div class="items"> <div class="overlay"></div> <div class="item-text">Home</div> </div> <div class="items"> <div class="overlay"></div> <div class="item-text">About</div> </div> <div class="items"> <div class="overlay"></div> <div class="item-text">Contact</div> </div> <div class="items"> <div class="overlay"></div> <div class="item-text">Other</div> </div> </div> 

Answer 2

我写了一些代码

//html

<ul>
   <li><a href="">Home</a></li>
   <li><a href="">About</a></li>
   <li><a href="">Contact</a></li>
</ul>


//This is sass 

ul {
  list-style:none;
  background:red;

  li {
    display:inline-block;
    padding:10px;
    position:relative;


    &:before {
      position: absolute;
      content: "";
      width: 100%;
      height: 0%;
      left: 0;
      bottom: 0;
      background:blue;
      transition: height ease-in-out 0.5s;
    } 

    a {
      z-index:2;
      position:relative;
      color:white;
    }

    &:hover {
       &:before {
          height: 100%;
       }
    }
  }
}

Answer 3

 ul{ list-style-type: none; margin-left: 0; padding-left: 0; display: flex; } ul li{ border: 1px solid #d3d3d3; text-align: center; height: 100px; width: 100px; margin-right: 4px; } ul li a{ color: #000000; text-decoration: none; position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } ul li a:after{ content: ''; position: absolute; background: lightblue; left: 0; bottom: 0; height: 0%; width: 100%; z-index: -1; } ul li a:hover:after{ animation: bounce 1s ease-in-out forwards; } @keyframes bounce { 0% {height: 0%} 20% { height: 100%} 55% { height: 95%} 100% {height: 100%} } 

 <ul> <li><a href="#">Lorem, ipsum.</a></li> <li><a href="#">Saepe, asperiores!</a></li> <li><a href="#">Vitae, expedita?</a></li> <li><a href="#">Dicta, quo.</a></li> <li><a href="#">Sed, et.</a></li> </ul>