Question

拿这个片段：

＆＃13;

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

＆＃13;

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

＆＃13;

容器内的简单div，当悬停在上面时会扩展到100％。我想要做的是非常类似于此，但在导航菜单中（类似于http://www.mineplex.com/）。

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

我尝试使用JQuery来解决这个问题，使用＆＃34; .hovered＆＃34;没有运气的课。如何编码呢？

非常感谢任何帮助。谢谢！

Answer 1

以下是演示：

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

容器使用柔性显示器制作响应式导航栏容器，其每个项目的宽度为20％（可以调整）。
每个项目（具有相对定位）有两个子容器（具有绝对定位），第一个是我们用于获得蓝色过渡背景（z-index：1）和第二个的叠加前面有一个固定的文字（z-index：2）。
现在，z-index确保叠加层将在后面转换，文本将在前面修复，另外要记住的是因为我们从下往上转换它，我们设置底部：覆盖类上的0以及高度：0％;。
在悬停时，我们将高度从0％过渡到100％。

两个代码段之间的差异：

在第一个代码段中，我们使用.items:hover .overlay在悬停时转换每个项目。
在第二个代码段中，我们通过使用.container:hover > *.items> .overlay（＆＃34;＆gt;＆＃34;直接）在容器悬停而不是单个项目时转换每个项目儿童选择器）。

首先：单独悬停每个项目以展开叠加层。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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%}
}

＆＃13;

<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>

＆＃13;

JQuery在导航上创建扩展div

3 个答案: