如何使CSS按钮中的文本仅显示在悬停状态？

我在一个示例网站上制作了一些CSS div按钮，这些按钮用于侧栏导航菜单。我只是想知道如何才能使文本只在鼠标悬停在按钮上时出现

如果有一种方法只在div的悬停部分下的CSS中包含文本（例如：“Click Here！”），那就行了，但我认为你做不到。如果我将其包含在HTML中，那么无论是否悬停，它都会显示出来

示例网站如下：

理想情况下，按钮应该是空白的，然后当它们悬停在上方时，它们会延伸，链接就会出现

以下是第一个按钮的代码：

.button1 {
    position: fixed;
    margin-top: 100px;
    margin-left: 730px;
    width:70px;
    height:50px;
    text-align:right;
    padding: 0px 50px 0px 0px;
    background:#75AD38;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

以下是您悬停时的代码：

.button1:hover{ 
    width:200px;
}

任何关于使我的代码更加精简的建议都将不胜感激，因为我目前为五个按钮中的每一个都复制粘贴了这段代码，我知道这很笨重，但我不知道如何使它们都是相同类型的按钮，但随后将它们单独定位

我也不知道为什么加载页面时按钮会延长。这是不应该发生的

---

谢谢大家!

一个可能的解决方案是将字体颜色设置为背景色，然后将其更改为悬停。这把小提琴展示了这一点：

在css中添加字体颜色

.button1{
    background:#75AD38;
    color:#75AD38;
}

和悬停的颜色

.button1 hover{
    color:#fff;
}

至于简化css，只需将样式应用于基本标记，即

按钮

，然后按类名应用各个样式。例如，为两个按钮设置单独的背景颜色。。。 编辑：将button更改为

.baseButton

，因此它可以用作button div的基类

/*style for all button tags */
.baseButton{
    width:70px;
    height:50px;
    margin-top: 100px;
    margin-left: 30px;
    text-align:right;
    padding: 0px 50px 0px 0px;
    background:#75AD38;color:#75AD38;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

/*individual styles */
.button1{
    background-color:#afa;
    color:#afa;
}
.button2{
    background-color:#faa;
    color:#faa;
}

这将在html中使用，如下所示：

<div class="baseButton button1">Your button</div>

html

您的按钮

您可以在

悬停

把它放在正常状态，因为它是不可见的

 .button1 {
     position: fixed;
     margin-top: 100px;
     margin-left: 730px;
     width:70px;
     height:50px;
     text-align:right;
     padding: 0px 50px 0px 0px;
     background:#75AD38;
     color:#75AD38;   // same color as background
     transition:width 2s;
     -moz-transition:width 2s; /* Firefox 4 */
     -webkit-transition:width 2s; /* Safari and Chrome */
     -o-transition:width 2s; /* Opera */
}


.button1:hover {
    color:#fff ||#000 //like any suitable color 
}

但这不是正确的方法

您也可以使用

文本缩进

或者我认为

内容：“文本”：before

和

：after

中使用的悬停模式下的code>也可以工作，但我不确定

---

注: 它的可用性也不好

---

当用户必须悬停每个按钮以查看按钮的功能时，他们会感到恼火。

要使CSS按钮中的文本仅显示在

悬停

上，您可以使用CSS

内容

属性（您必须查找跨浏览器支持），使用JavaScript，或者按照其他人的建议更改悬停时文本的颜色。下面是一个JS fiddle，介绍了前两个解决方案：

/**/
#按钮1{
宽度：200px；
高度：50px；
线高：50px；
文本对齐：居中；
背景颜色：绿色；
}
#按钮1：悬停：之前{
内容：“viaCSS”；
}

我个人建议您不要这样做，因为这会影响使用体验。在搜索内容时，人们可能会发现将鼠标悬停在每个按钮上很烦人

不过，如果你还想继续，这里有一个可行的方法

基本上你的文字样式是这样的

.button1 p {
display:none;

.button1:hover p {
    display:inline;

}

然后像这样在悬停时使其可见

.button1 p {
display:none;

.button1:hover p {
    display:inline;

---

}

下面是一个快速示例，说明如何使用css子组合器仅在悬停时显示文本

 <div>
  <p>text</p>
 </div>

/** CSS **/
* {
 margin: 0;
 padding: 0;
}

div {
 width: 60px;
 height: 40px;
 background-color: green;
 border: 1px solid #000;
}

p {
 text-align: center;
 color: #fff;
 vertical-align: middle;
 display: none;
 line-height: 40px;
}

div:hover > p {
 display: block;
}

正文

/**CSS**/
* {
保证金：0；
填充：0；
}
div{
宽度：60px；
高度：40px；
背景颜色：绿色；
边框：1px实心#000；
}
p{
文本对齐：居中；
颜色：#fff；
垂直对齐：中间对齐；
显示：无；
线高：40px；
}
div:hover>p{
显示：块；
}

---

使用珍贵的CSS代码

---

我使用文本可见性隐藏，悬停可见性可见。

这是最好的。

您可以使用text-indent。text-indent不会完全删除文本。我只是不想让它在按钮悬停之前出现。这听起来是个糟糕的主意，因为用户会被迫悬停在按钮上以了解它们是什么，甚至可能根本没有意识到它们是按钮。按钮正在扩展，因为您正在对其应用css转换。@aarav-无文本解决方案：您应该知道，链接中根本没有文本对于SEO和可用性来说是非常糟糕的。嗯，这不是一个供任何人使用的真正的网站，所以我不关心可用性或SEO。我只是随便玩玩，想弄明白怎么做这件事。谢谢！我尝试使用您的方法来简化，但我肯定是在HTML部分做了一些错误：我应该使用

？当我使用它时，样式表中按钮部分的所有属性都不起作用，并且按钮放错了位置。如果您使用的是div，则需要将基本样式应用于div not button。ie div{base styles here；}。然而，这会影响你所有的div，包括那些你不使用的按钮。因此，您可以为按钮div使用两个类，一个是基本样式.baseButton，正如我在上面编辑的答案中定义的那样。第一个按钮第二个按钮我更新了我的答案，以显示如何使用id选择器，。

 <div>
  <p>text</p>
 </div>

/** CSS **/
* {
 margin: 0;
 padding: 0;
}

div {
 width: 60px;
 height: 40px;
 background-color: green;
 border: 1px solid #000;
}

p {
 text-align: center;
 color: #fff;
 vertical-align: middle;
 display: none;
 line-height: 40px;
}

div:hover > p {
 display: block;
}