如何在不转换的情况下将文本放置在移动的 div 上答案

【问题标题】：How do I place text over a moving div without it being transformed如何在不转换的情况下将文本放置在移动的 div 上
【发布时间】：2020-04-19 17:46:33
【问题描述】：

我很苦恼……

这就是我的情况，当鼠标悬停在它上面时，我想制作一个移动动画。

发生这种情况时，我希望在此 div 上分层的文本保持在同一位置。

在我的设置中，我有一个父 div，当鼠标悬停在它上面时，它控制其中的黄色 div。父 div 内部还有我想放置在黄色 div 边缘上并在动画期间保持静止的文本。

html:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Lorem</h1>
    <br>
    <h2>ipsum dolor</h2>
    <br><br><br>
    <div>
      <div id="yellow-con">
        <div><p><b>button</b></p></div>
        <div class="yellow"></div>
      </div>
    </div>
  </body>
</html>

css:

p {
  display: inline;
  font-family: 'Crimson Text';
  color: #faf3dd;
  font-size:5vh;
  z-index: 2;
}

#yellow-con {
  background-color: #000000;
  height: auto;
  width: 100%
}

.yellow {
  display: inline-block;
  left: 20%;
  height: 7%;
  position: relative;
  transition: transform 0.4s ease;
  transform-origin: right;
  transform: scaleX(0px);
  width: 80%;
  background-color: #fccd34;
  z-index: 1;
}

#yellow-con:hover .yellow {
  transform: scaleX(.75);
}

这就是它正在做的事情

无论我做什么，如果没有它，我根本找不到将文本放在移动分隔线上的方法：

与移动的 div 不在同一个 x 平面上
随着 div 的移动而变形

【问题讨论】：

标签： html css animation css-animations css-transitions

【解决方案1】：

希望这就是您要找的。如果您不希望文本移动，则应将绝对位置添加到黄色 div，并将相对位置添加到父 div。然后您可以根据需要定位黄色 div。另外，你应该把宽度：80%；在您的 scaleX(0) 之前，以便转换可以工作，并且您应该给 scaleX 转换，0 作为一个值，而不是 0px。

运行sn-p查看结果。

p {
  display: inline;
  font-family: 'Crimson Text';
  color: #faf3dd;
  font-size:5vh;
  z-index: 2;
}

#yellow-con {
  background-color: #000000;
  height: auto;
  position: relative;
  padding: 10px;
}

.yellow {
  position: absolute;
  left: 20%;
  top: 0;
  height: 100%;
  transition: transform 0.4s ease;
  transform-origin: right;
  width: 80%;
  transform: scaleX(0);
  background-color: #fccd34;
  z-index: 1;
}

#yellow-con:hover .yellow {
  transform: scaleX(.75);
}

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Lorem</h1>
    <br>
    <h2>ipsum dolor</h2>
    <br><br><br>
    <div>
      <div id="yellow-con">
        <div><p><b>button</b></p></div>
        <div class="yellow"></div>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

我已经为用例做了一个粗略的 sn-p，请在此基础上进行构建。

.relative{
  position:'relative';
  width:150px;
  height:50px;
}

.static{
  position:absolute;
}

.hoverable{
  width:100%;
  height:100%;
  background-color:yellow;
  transition:transform 1s;
}

.hoverable:hover{
  transform:translate(150px,0px);
}

<div class='relative'>
<div class='static'>Static Text</div>
<div id='yellow' class='hoverable'/>
</div>

【讨论】：

【解决方案3】：

p {
  display: inline;
  font-family: 'Crimson Text';
  color: #faf3dd;
  font-size:5vh;
  z-index: 2;
}

/*added this class*/
.child-1 { 
  position: absolute;  
  z-index: 10;
}

#yellow-con {
  background-color: #000000;
  position: relative;
  height: 25px;
}

.yellow {
  position: absolute;
  top: 0;
  height: 100%;
  transition: transform 0.4s ease;
  transform-origin: right;
  width: 100%;
  transform: scaleX(0);
  background-color: #fccd34;
  z-index: 1;
}

#yellow-con:hover .yellow {
  transform: scaleX(1);
}

#yellow-con:hover b {
  color: black;
}

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div>
      <div id="yellow-con">
        <div class="child-1"><p><b>button</b></p></div>
        <div class="yellow"></div>
      </div>
    </div>
  </body>
</html>

【讨论】：