鼠标悬停的滑动框 - CSS答案

【问题标题】：Sliding box on mouse over - CSS鼠标悬停的滑动框 - CSS
【发布时间】：2020-02-29 21:33:20
【问题描述】：

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

另外，我不认为它会在响应式页面中顺利运行，所以你有什么想法让它在没有某些定位（如“底部：-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>

【问题讨论】：

我想要实现的是：当鼠标悬停时应该出现框并且应该在 div2 和 div3 之间滑动。 div1 只是主容器。
我不明白，盒子在div2和div3之间滑动，你想让它移动更顺畅吗？
没有。我问的是我们可以用更简单的 css 做同样的事情，而不用将盒子的位置确定为 px。我觉得这不是最好的方法。

标签： css animation hover slide box

【解决方案1】：

其实我想我做到了。在这种情况下，有两个元素，所以我将它们放置在主容器的顶部和底部。

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

【讨论】：

【解决方案2】：

通常，您将需要所谓的“特定定位”，但如果您要使用响应式页面运行它，则使用手机的用户必须在该区域移动之前点击该区域，而不是悬停它。使用纯 CSS 会很麻烦，因为您必须逐字逐句地遍历所有代码。

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

【讨论】：

嘿，谢谢！你是对的，使用特定的垂直测量应该不是问题。最终，所有内容都已确定为特定数字。我认为最流畅的方法是使用 jquery 并将框拖动到悬停元素的位置。