时间戳

首页 > 解决方案 > 块悬停更高的另一个块

css - 块悬停更高的另一个块

问题描述

在黄色方块中我有一个悬停效果，但是当悬停时绿色块显示得越高。我需要仅在黄色方块处的悬停效果。

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

标签： csshover

解决方案

我不确定我是否 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>

推荐阅读