水平 "split" 纯 CSS 元素，每半部分内容不同

Question

我正在尝试找到一种方法来为元素提供“拆分”外观，允许根据用户将鼠标悬停在哪一半上来显示两个内容之一。

这是我想出的版本：顶部文本设置为半高并移动到底部文本的顶部。当用户将鼠标悬停在顶部时，它会展开以覆盖底部，当用户将鼠标悬停在底部时，顶部会向上滚动以隐藏其内容。

.container {
    width: 2em;
    font-size: 5rem;
    text-align: center;
    font: "Consolas";
}

.bottom, .top {
    line-height: 2em;
    background-color: black;
}

.bottom {
    color: yellow;
}

.top {
    color: lime;
    overflow: hidden;
    text-overflow: clip; 
    height:1em;
    margin-top: -2em;
    position:relative;
    transition: 0.5s;
}

.bottom:hover + .top {
    height: 0.6em;
}

.top:hover {
    height: 1.4em;
}

<div class="container">
    <div class="bottom">MAX</div>
    <div class="top">MIN</div>
</div>

感觉非常……笨拙。有没有更好的选择来实现这个？

Answer 1

这是一个想法，使用 clip-path 更易于管理

.container {
  display: inline-block;
  line-height: 1.5em;
  font-size: 5rem;
  text-align: center;
}

.container>div {
  position: relative;
  z-index: 0;
  transition: 0.8s clip-path,z-index 0s 0.8s;
  background-color: black;
}

.container> :first-child {
  color: yellow;
  clip-path: inset(0 0 50% 0);
}

.container> :last-child {
  margin-top: -1.5em; /* equal to line-height */
  color: red;
  clip-path: inset(50% 0 0 0);
}

.container>div:hover {
  clip-path: inset(0 0 0 0);
  transition: 0.8s clip-path,z-index 0s 0s;
  z-index: 1;
}

<div class="container">
  <div class="bottom">MAX</div>
  <div class="top">MIN</div>
</div>

<div class="container" style="font-size:40px">
  <div class="bottom">Top</div>
  <div class="top">down</div>
</div>

水平 "split" 纯 CSS 元素，每半部分内容不同

Horizontally "split" element in pure CSS with different contents in each half

html

css

css-transitions