Question

我想创建一个按钮，当您将鼠标悬停在该按钮上时会显示不同的文字。我希望它是固定的宽度，但我不知道最长文本的宽度，因为我将使用Javascript翻译，可能的内容将有不同的长度。

有没有办法让按钮与CSS最长文本的宽度相同？

这里是fiddle。

＆＃13;

.hover-btn .hover-on,
.hover-btn:hover .hover-off {
  display: none;
}
.hover-btn:hover .hover-on,
.hover-btn .hover-off {
  display: inline;
}

＆＃13;

<button id="myButton" class="hover-btn">
  <span class="hover-off">hey!</span>
  <span class="hover-on">click me!</span>
</button>

＆＃13;

Answer 1

一种方法是隐藏没有display:none的元素，因此不要将其从流中删除。试试这个：

.hover-btn .hover-on, .hover-btn:hover .hover-off {
  height: 0;
  display:block;
  overflow:hidden;
  visibility:hidden;
}
.hover-btn:hover .hover-on, .hover-btn .hover-off {
  height:auto;
  visibility:visible;
}

<button id="myButton" class="hover-btn">
  <span class="hover-off">hey!</span>
  <span class="hover-on">click me!</span>
</button>

根据最长文本的大小更改div的宽度

1 个答案: