Question

我在<p>中有一个包含文字的div，我想仅使用css在文本上创建幻灯片效果。要执行此操作，我尝试将<p>设置为width:0px;，并将鼠标悬停在div上时将其更改为100％。除了当我将宽度设置为0时，内部文本将不会保持原样。有办法解决这个问题吗？这是一个fiddle，以及下面的代码段。

html,body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#block {
  width: 23%;
  height: 50px;
  border: 2px solid black;
  text-align: center
}
#block p {
  width: 0px;
  transition: all .5s linear;
  background-color: red;
}
#block:hover p {
  width:100%;
}

<div id="block">
<p>
Text Text Text
</p>
</div>

Answer 1

我更新了您的fiddle

#block p {
  width: 0px;
  transition: all .5s linear;
  background-color: red;
  /* added css */
  overflow:hidden; 
  white-space:nowrap; 
  /* added css */
}

这就是你想要发生的事情吗？

使用带有文本的CSS悬停时增加div的宽度

1 个答案: