时间戳

首页 > 解决方案 > 移动（变换：翻译（x，y））文本（

) 在一个 div 中，使它看起来像是隐藏在同一个 div 中

html - 移动（变换：翻译（x，y））文本（

) 在一个 div 中，使它看起来像是隐藏在同一个 div 中

问题描述

基本上我有一个 div，当悬停在它上面时，文本会向右移动。我想实现一些效果，就好像文本在向右移动时丢失在 div 内一样。

.rectangulo_categoria {
  border-radius: 34px;
  border: 2px solid red;
  width: 195px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
}

.rectangulo_categoria:hover .texto_engranen_1 {
  transform: translate(168px, 0px);
  opacity: 0;
}

.texto_engranen_1 {
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  font-size: 12px;
  width: auto;
  font-weight: 400;
  pointer-events: none;
  line-height: 1;
  transition: 0.5s all ease-out;
  opacity: 1;
  color: #343434;
}
<div class="rectangulo_categoria" mdbWavesEffect>
  <p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>

这是我的完整代码：

https://jsfiddle.net/te0p2fqb/

标签： htmlcss

解决方案

您可以overflow: hidden;在 div 上添加一个。我还重新安排了你的课程并删除了一些重复的道具。

.rectangulo_categoria {
  border-radius: 34px;
  border: 2px solid red;
  width: 195px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

.texto_engranen_1 {
  line-height: 1;
  z-index: 1;
  font-size: 12px;
  width: auto;
  font-weight: 400;
  pointer-events: none;
  transition: 0.5s all ease-out;
  opacity: 1;
  color: #343434;
}

.rectangulo_categoria:hover .texto_engranen_1 {
  transform: translate(168px, -50%);
  opacity: 0;
}
<div class="rectangulo_categoria" mdbWavesEffect>
  <p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>

编辑 当然检查小提琴上的代码以获得绝对解决方案。主要的变化是我删除了 flex 及其属性，还重置了<p>.

推荐阅读