阻止在另一个块上方悬停

Question

在黄色方块中我有悬停效果，但悬停显示时绿色块越高。我需要只在黄色方块上悬停的效果。

我尝试使用z-index - 没有帮助。

我做错了什么？

*{
  padding: 0;
  margin: 0;
  
}
.wrapper {
  border:2px solid black;
  margin-top: 20px;
  padding: 20px 20px;
  height: 100%;
}

.block__one {
  background-color:green;
  z-index:5;
  position: relative;
}

.item {
  padding: 10px;
  margin: 0;
  text-align:center;
}
.list {
  display: inline-block;
  width: 50px;
  height: 40px;
  background-color:yellow;
  position: relative;
  z-index:10;
}

.list:hover .list__hover {
  opacity:1;
  bottom:0;
}

.list__hover {
  width: 100%;
  height: 50%;
  background-color: #fff;
  position: absolute;
  bottom:-50px;
  transition: bottom 0.5s;
  opacity:0;
  z-index:4;
}

.block__two {
  background-color:red;
  width: 100%;
  height: 200px;
   z-index:5;
  position: relative;
}

<div class="wrapper">
  <div class="block__one">
    <ul class="item">
      <li class="list">
        <div class="list__hover"></div>
      </li>
            <li class="list">
        <div class="list__hover"></div>
     
    </ul>
  </div>
  <div class="block__two"></div>
</div>

Answer 1

我不确定我是否100％了解您的帖子，但我相信您只需添加

~/Library/Application\ Support/NotificationCenter/

到.list类

检查代码段是否正在执行您想要的操作：

＆＃13;

＆＃13;

overflow:hidden

＆＃13;

*{
  padding: 0;
  margin: 0;
  
}
.wrapper {
  border:2px solid black;
  margin-top: 20px;
  padding: 20px 20px;
  height: 100%;
}

.block__one {
  background-color:green;
  z-index:5;
  position: relative;
}

.item {
  padding: 10px;
  margin: 0;
  text-align:center;
}
.list {
  display: inline-block;
  width: 50px;
  height: 40px;
  background-color:yellow;
  position: relative;
  z-index:10;
  overflow:hidden;
}

.list:hover .list__hover {
  opacity:1;
  bottom:0;
}

.list__hover {
  width: 100%;
  height: 50%;
  background-color: #fff;
  position: absolute;
  bottom:-50px;
  transition: bottom 0.5s;
  opacity:0;
  z-index:4;
}

.block__two {
  background-color:red;
  width: 100%;
  height: 200px;
   z-index:5;
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

此处使用height 0%的第一个50%然后将其转换为* { padding: 0; margin: 0; } .wrapper { border: 2px solid black; margin-top: 20px; padding: 20px 20px; height: 100%; } .block__one { background-color: green; z-index: 5; position: relative; } .item { padding: 10px; margin: 0; text-align: center; } .list { display: inline-block; width: 50px; height: 40px; background-color: yellow; position: relative; z-index: 10; } .list:hover .list__hover { opacity: 1; bottom: 0px; height: 50%; transition: linear .5s; } .list__hover { width: 100%; height: 0%; background-color: #fff; position: absolute; bottom: 0px; opacity: 0; z-index: 4; } .block__two { background-color: red; width: 100%; height: 200px; z-index: 5; position: relative; }的另一个解决方案。还要检查你的代码，其中有一些错误。例如，您可以使用W3验证器。

＆＃13;

＆＃13;

<div class="wrapper">
  <div class="block__one">
    <ul class="item">
      <li class="list">
        <div class="list__hover"></div>
      </li>
      <li class="list">
        <div class="list__hover"></div>
      </li>
    </ul>
  </div>
  <div class="block__two"></div>
</div>

＆＃13;

a.header_nav { 

}

＆＃13;

＆＃13;

＆＃13;