块悬停更高的另一个块

格雷戈里

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

我试图使用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>

迈克尔·比森

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

overflow:hidden

到 .list 类

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

*{
  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;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。