悬停在按钮上会显示不同的文本。如何防止更改按钮宽度？

Question

我想知道如何在悬停时让按钮保持宽度。我想使用css进行转换而不是jQuery解决方案。

那我该怎么做？如果有一个纯粹的css实现，我会喜欢它，但如果必须，我会满足于jQuery。

编辑：由于按钮文本是动态的，因此min-width不起作用。

这是fiddle.

$(function() {
  $('button')
    .on('mouseover', function() {
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    })
    .on('mouseout', function() {
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    });
});

button {
  height: 60px;
  padding: 0 25px;
  line-height: 60px;
  background-size: 100% 200%;
  transition: all 0.1s;
  background-image: linear-gradient(to top, green 50%, white 50%);
}
button:hover {
  color: white;
  background-position: 0 100%;
}
.options {
  font-size: 13px;
}
.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">
  <span class="btn-text">Button Thing</span>
  <span class="options hidden">Go</span>
</button>

Answer 1

添加CSS解决方案，因为我的jQuery解决方案无法正常工作。

我更改了.hidden类以使用不透明度，然后绝对定位了选项文本。只有当选项文本总是比初始文本短时，这才有效。

jsfiddle

button{
  height: 60px;
  padding: 0 25px;
  line-height: 60px;
  background-size: 100% 200%;
  transition: all 0.1s;
  background-image: linear-gradient(to top, green 50%, white 50%);
  position: relative;
}

button:hover {
  color: white;
  background-position: 0 100%;
}
.options{
  font-size: 13px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.hidden{
  opacity: 0;
}

Answer 2

最简单的解决方案可能是添加以下jQuery，在其中为按钮添加内联宽度。

＆＃13;

＆＃13;

$(function() {
  $('button')
    var width = $(this).width();
    .on('mouseover', function() {
      $(this).css('width',width);
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    })
    .on('mouseout', function() {
      $(this).find('.btn-text').toggleClass('hidden');
      $(this).find('.options').toggleClass('hidden');
    });
});

＆＃13;

button {
  height: 60px;
  padding: 0 25px;
  line-height: 60px;
  background-size: 100% 200%;
  transition: all 0.1s;
  background-image: linear-gradient(to top, green 50%, white 50%);
}
button:hover {
  color: white;
  background-position: 0 100%;
}
.options {
  font-size: 13px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

}
.hidden {
  display: none;
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">
  <span class="btn-text">Button Thing</span>
  <span class="options hidden">Go</span>
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您必须在.button

中修复宽度：width:25%;

结果：jsfiddle

.button{
 height: 60px;
 padding: 0 25px;
 line-height: 60px;
 background-size: 100% 200%;
 transition: all 0.1s;
 background-image: linear-gradient(to top, green 50%, white 50%);
  width:25%;
}