鼠标悬停在滑动框上-CSS

Question

我想知道是否有更好的方法可以做到这一点：

而且我也不认为它在响应式页面中会顺利运行，所以您有没有让它在没有诸如'bottom：-45px;'之类的某些位置的情况下可以工作的想法。

我只是想知道这个，所以这不是我要在某处使用的东西。我知道可以使用jquery轻松完成，但是我想知道是否有机会使用纯CSS实现此效果

.d1 {
  width: 320px;
  border: none;
  padding: 10px;
  margin: 10px 0px;position: relative;
}

.d2 {
  width: 70%;
  position: relative;
  left: 0px;
  right: 0px;
  padding: 20px 0px;
  margin: 10px 0px;
  border: none;
}

.d3 {
  width: 90%;position: relative;
  left: 0px;
  margin: 20px 0px;
  padding: 20px 0px;
  right: 0px;
  border: none;
}

.d3 p, .d2 p, d1 p {
  z-index:999;
  position:relative;

}




.hov {
  width: 40%;
  padding: 20px 10px;
  background-color: #300;
  position:relative;
  opacity:0;
  bottom:-45px;left:0px;
  z-index:0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}

.d2 { pointer-events: none;}
.d3 { pointer-events: auto;}

.d2:hover .hov{
opacity:1;
 bottom:-123px;
}

.d1:hover .hov{
opacity:1;
}

<div class="d1">
div1
  <div class="d2">
    <div class="hov" id="hov">
    </div>
    <p>
      div2
    </p>
    <div class="d3">
      <p>
      div3</p>
    </div>
  </div>
</div>

Answer 1

通常，您会称其为“某些定位”，但是如果要在响应页面上运行该页面，则用户需要使用手机在移动之前单击该区域，而不是在该区域移动。盘旋它。使用纯CSS会很麻烦，因为您必须从字面上遍历所有代码。

我的建议是，只要是垂直测量，通常可以使用特定的数字（即-45px）。

Answer 2

实际上，我认为我做到了。在这种情况下，有两个元素，因此我将它们放在主容器的顶部和底部。

.d1 {
  width: 320px;
  padding: 10px;
  margin: 10px;
  position: relative;
  cursor: default;
}

.d2 {
  position: relative;
  margin-top: -15px;
  margin-bottom: 60px;
}

.d3 {
  position: relative;
  margin-bottom: -15px;
}

.d3 p,
.d2 p {
  z-index: 999;
  position: relative;
}

.hov {
  width: 40%;
  height: 40%;
  background-color: #300;
  position: absolute;
  opacity: 0;
  top: 0%;
  left: 0px;
  z-index: 0;
  transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}

.d3:hover+.hov {
  top: 60%;
}

.d1:hover .hov {
  opacity: 1;
}

<div class="d1">

  <div class="d2">
    <p> div2 </p>
  </div>

  <div class="d3">
    <p> div3 </p>
  </div>

  <div class="hov"></div>

</div>