html - 以上滑效果显示悬停内容？

我试图通过从各个方向滑入来显示或隐藏一个面板，同时显示或隐藏另一个固定位置的面板，这就是我在标题中的“揭开面纱”的意思。这是演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        .parent-panel {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 10px;
            position: relative;
        }

        .child-panel {
            background-color: yellow;
            position: absolute;
            transition: all 0.5s ease;
            overflow: hidden;
        }

        .content {
            width: 50px;
            height: 100px;
            background-color: blue;
            margin: 40px auto;
        }

        #slide-down .child-panel {
            width: 100%;
            height: 0;
            bottom: 100%;
        }

        #slide-down:hover .child-panel {
            height: 100%;
            bottom: 0;
        }

        #slide-up .child-panel {
            width: 100%;
            height: 0;
            bottom: 0;
        }

        #slide-up:hover .child-panel {
            height: 100%;

        }

        #slide-right .child-panel {
            width: 0;
            height: 100%;
            right: 100%;
        }

        #slide-right:hover .child-panel {
            width: 100%;
            right: 0;
        }

        #slide-left .child-panel {
            width: 0;
            height: 100%;
            left: 100%;
        }

        #slide-left:hover .child-panel {
            width: 100%;
            left: 0;
        }
    </style>
</head>
<body>
<div id="slide-down" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-up" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-right" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-left" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
</body>
</html>

我希望所有面板都显示或隐藏它们的蓝色方 block ，就好像它在悬停之前或之后固定在适当的位置，就像第一个面板一样。解决方案应包围内容的边距

.content {
    margin: 40px auto;
}

我们应该根据父面板而不是子面板来计算内容的边距。例如，对于向上滑动的面板，内容的垂直边距应该相对于父面板的上边框计算。但我不知 Prop 体如何，经过相当多的研究也找不到答案。

最佳答案

我会在我制作动画的元素上方考虑一个叠加层:

.parent-panel {
  width: 200px;
  height: 200px;
  background-color: purple;
  margin-top: 10px;
  position: relative;
  z-index:0;
}
.parent-panel::before {
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  transition: all 0.5s ease;
}

.child-panel {
  background-color: yellow;
  overflow:hidden;
}

.content {
  width: 50px;
  height: 100px;
  background-color: blue;
  margin: 50px auto;
}

#slide-down:hover::before {
  bottom: 100%;
}
#slide-up:hover::before {
  top:100%;
}

#slide-right:hover::before {
  left:100%;
}

#slide-left:hover::before {
  right:100%;
}

<div id="slide-down" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-up" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-right" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-left" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>

也可以考虑翻译来达到类似的效果:

.parent-panel {
  width: 200px;
  height: 200px;
  background-color: purple;
  margin-top: 10px;
  position: relative;
  z-index:0;
  overflow:hidden;
}

.child-panel {
  background-color: yellow;
  overflow:hidden;
  transition:1s all;
}

.content {
  width: 50px;
  height: 100px;
  background-color: blue;
  margin: 50px auto;
}
#slide-down .child-panel {
  transform:translateY(-100%);
}
#slide-up .child-panel {
  transform:translateY(100%);
}
#slide-right .child-panel {
  transform:translateX(-100%);
}
#slide-left .child-panel {
  transform:translateX(100%);
}
#slide-down:hover .child-panel,
#slide-up:hover .child-panel,
#slide-left:hover .child-panel,
#slide-right:hover .child-panel{
  transform:translate(0);
}

<div id="slide-down" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-up" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-right" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-left" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>

关于html - 以上滑效果显示悬停内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54103930/

html - 以上滑效果显示悬停内容？

上一篇：html - 如何将中间元素居中放置在 flex 行中？

下一篇：html - CSS，在一定数量的符号后插入换行符