Jquery 悬停在按钮上会显示不同的文本，这些文本不是'；没有那么宽。如何防止更改按钮宽度？

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

那我该怎么做呢？如果有一个纯css实现，我会很喜欢，但如果有必要，我会选择jQuery

编辑：最小宽度无效，因为按钮文本是动态的

这里有一个

$（函数（）{
$（“按钮”）
.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'）；
});
});
按钮{
高度：60px；
填充：0 25px；
线高：60px；
背景大小：100%200%；
过渡：所有0.1秒；
背景图像：线性渐变（至顶部，绿色50%，白色50%）；
}
按钮：悬停{
颜色：白色；
背景位置：0.100%；
}
.选项{
字体大小：13px；
}
.隐藏{
显示：无；
可见性：隐藏；
}

纽扣
去
您必须固定宽度：
宽度：25%输入按钮

结果:

您必须固定宽度：
width:25%输入按钮

结果:

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


$（函数（）{
$（“按钮”）
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'）；
});
});
按钮{
高度：60px；
填充：0 25px；
线高：60px；
背景大小：100%200%；
过渡：所有0.1秒；
背景图像：线性渐变（至顶部，绿色50%，白色50%）；
}
按钮：悬停{
颜色：白色；
背景位置：0.100%；
}
.选项{
字体大小：13px；
位置：绝对位置；
排名：0；
右：0；
底部：0；
}
.隐藏{
显示：无；
可见性：隐藏；
}

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


$（函数（）{
$（“按钮”）
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'）；
});
});
按钮{
高度：60px；
填充：0 25px；
线高：60px；
背景大小：100%200%；
过渡：所有0.1秒；
背景图像：线性渐变（至顶部，绿色50%，白色50%）；
}
按钮：悬停{
颜色：白色；
背景位置：0.100%；
}
.选项{
字体大小：13px；
位置：绝对位置；
排名：0；
右：0；
底部：0；
}
.隐藏{
显示：无；
可见性：隐藏；
}

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

我将.hidden类更改为使用不透明度，然后绝对定位选项文本。当然，这仅在选项文本始终短于初始文本时才有效


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

我将.hidden类更改为使用不透明度，然后绝对定位选项文本。当然，这仅在选项文本始终短于初始文本时才有效


这根本不可伸缩。答案不应该取决于按钮的宽度。这根本不可伸缩。答案不应该取决于按钮的父宽度。你知道jQuery甚至都不接近正确。它会一次又一次地失败。为什么会有人投这个票？这怎么会失败呢？它只是在悬停时设置一个内联宽度以保留当前宽度。虽然如果隐藏的按钮文本比当前文本宽，我可以看到哪里会有问题。你是说真的吗？你觉得这样行吗<代码>$（'button'）变量宽度=$（this）.width（）；。在（'mouseover'，function（）{…}
不管怎样，我知道你在想什么…CSS悬停发生在jQuery能够控制原始宽度之前。啊，我知道我所做的，你是绝对正确的-很抱歉。我认为CSS解决方案可能是最好的。我添加了一个作为新的答案…你知道jQuery甚至不接近正确。它会一次又一次地失败。为什么uld有人投票吗？这怎么会失败？它只是在悬停时设置一个内联宽度以保留当前宽度。虽然如果隐藏的按钮文本比当前文本宽，我可以看到哪里会有问题。这是你的意思吗？真的吗？你认为这会起作用吗？
$（'button'）var width=$（this）.width（）；.on（'mouseover'，function（）{…}
不管怎样，我知道你在想什么…CSS悬停发生在jQuery获得原始宽度之前。啊，我知道我做了什么，你是绝对正确的-很抱歉。我认为CSS解决方案可能是最好的。我添加了一个作为新答案…非常好！谢谢！我根本没有考虑过这个问题！非常好！谢谢！我没有考虑过考虑过这一切！
.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%;
}

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;
}