CSS动画：悬停时扩展按钮文本

Question

CSS动画：悬停时扩展按钮文本

9

我希望当鼠标悬停在按钮上时，能够展示更多的文本，并使按钮随着扩展的文本而缩小或放大。

由于按钮上的文本及其宽度将取决于用户选择的语言，因此我需要一个通用解决方案。

这是我的尝试（目前还不起作用）：

.hover-value {
  display: inline-block;
  visibility: collapse;
  width: 0%;
  -webkit-transition: width 2s;
  transition: width 2s;
  overflow: hidden;
}
button:hover .hover-value {
  visibility: visible;
  width: 100%;
}

<button>
  Result
  <span class="hover-value">Add new result</span>
</button>

同时在JsFiddle上也提供了代码：https://jsfiddle.net/JohanGovers/46392xss/

我在我的项目中使用了jQuery和bootstrap，但是如果可能的话，我想用CSS来解决这个问题。我尝试过像其他SO答案中建议的那样调整可见性属性，但并没有成功。

任何帮助都将不胜感激。

- Johan Gov

6个回答

3

做完了，但动画效果有些奇怪：

更新-现在效果更加流畅，感谢jaunt提供的建议，在按钮CSS中添加了white-space: nowrap;

JS Fiddle

button {
  width: 53px;
  height: 21px;
  overflow: hidden;
  -webkit-transition: width 1s;
  transition: width 1s;
  white-space: nowrap; /*this was suggested by jaunt, thanks */
}
button:hover {
  width: 145px;
  -webkit-transition: width 1s;
  transition: width 1s;
}
button:hover::after {
  content: 'Add new result';
}

<h3>This is what I've got so far.</h3>

<button id="btn">
  Result
</button>

- Mi-Creativity

1

如果您在“button”中添加“white-space: nowrap;”，则文本将被强制放在一行上，这会导致您的“古怪”动画。 - jaunt

1

@Jaunt，非常感谢，我从未遇到过需要它的问题，这就是为什么我从未想过它，谢谢你提醒我！ - Mi-Creativity

0

尝试这种方法，您将获得所需的输出。

.hover-value {
    display: inline-block;
    /*visibility: collapse;*/
    -webkit-transition: width 2s;
    transition: width 2s;
    overflow: hidden;
    display:none;
  top:3px;
    position:relative;
}

button:hover .hover-value {
    visibility: visible;
    display: inline-block;
}

<button>
    Result
    <span class="hover-value">Add new result</span>
</button>

- Libin C Jacob

0

CSS 基础解决方案

.bookNow {
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  transition: 0.4s;
  height: 35px;
  padding: 0 5px;
  border-radius: 35px;
  cursor: pointer;
  border: 1px solid;
}

h1 {
  font-size: 14px;
  margin-left: 10px;
}

header {
  display: none;
  white-space: nowrap;
  padding-left: 15px;
}

.bookNow:hover {
  width: 200px;
  transition: 0.4s;
  border-radius: 35px;
}

.bookNow:hover header {
  display: block;
}

<div class="bookNow" title='Book Now'>
  <h1>X</h1>
  <header>Book An Appointment</header>
</div>

- Anutosh Chaudhuri

0

你可以通过改变字体大小来实现类似的效果。

将其从0像素更改为继承或特定尺寸。

.hover-value {
    font-size: 0px;
    -webkit-transition: font-size 1s;
    transition: font-size 1s;
}

button:hover .hover-value {
    font-size: inherit;
}

在 jsfiddle 上查看演示。

- Christoph

不错，试着改变span的宽度，可能会更好看。 - Mi-Creativity

固定宽度属性是很危险的。当文本长度改变时会发生什么？！ - Christoph

由于它说“添加新结果”，我不认为他会动态更改按钮的文本，而且如果他想要，他可以更改宽度，增大字体大小的唯一问题是动画看起来有点幼稚。 - Mi-Creativity

0

希望这能对你有所帮助，我已经在底部分享了 Jfiddle 链接供你参考，但是这里也会粘贴相关的代码。

body{
    margin:0;
    padding:0;
}

h3{
    margin:0;
    padding:0;
    line-height:1.5em;
}
button{
   text-align:left;
   width:7.5em; 
   overflow:hidden;
   transition:width 1s ease-in-out;
}
button:hover{
     width:20em;
     transition:width 1s ease-in-out;
}
button:focus{
    outline:none;
}
button span.sthGroup{
    display:block;
    width:20em;
    overflow-x:hidden;
}
</style>

<h3>button</h3>
<button class="" type="button">
    <span class="sthGroup">
        <span>some text here</span>
        <span>some additional text here</span>
    </span>
</button>

供您参考的示例

- vssadineni

@Mi-Creativity 谢谢您的编辑，是的，那是一个错误。 :) - vssadineni

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jaunt · Accepted Answer

为了实现最好的动画效果，我决定对max-width属性进行动画处理。目前，无法将动画处理到或从width:auto状态。请将max-width:7rem设置为大于文本长度的某个值。

为避免大量对齐CSS，我使用了display:inline-flex，这样就可以完美地对齐而不使用vertical-align等。如果有问题，可以进行更改。

然后使用white-space:nowrap将所有文本强制放在一行上，以使其动画更加平滑。

button span {
  max-width: 0;
  -webkit-transition: max-width 1s;
  transition: max-width 1s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
}
button:hover span {
  max-width: 7rem;
}

<button id="btn">
  Result 
  <span>New result</span>
</button>
<button id="btn">
  Result 
  <span>Different text</span>
</button>