3

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

如果有一种方法可以将文本（例如：“单击此处！”）包含在 CSS 中仅用于 div 的悬停部分下，那将起作用，但我认为您不能这样做。如果我将它包含在 HTML 中，那么无论是否悬停，它都会显示出来。

示例网站在这里：http ://www.arthiaravind.com/nursery/

理想情况下，按钮应该是空白的，然后当它们悬停在上面时，它们会扩展并出现链接。

这是第一个按钮的代码：

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

任何使我的代码更精简的建议也将不胜感激，因为我目前为五个按钮中的每一个都复制粘贴了此代码，我知道这很笨重，但我不知道如何使它们都成为相同类型的按钮，但是分别定位它们。

我也不知道为什么加载页面时按钮会扩展。这不应该发生。

谢谢！

4

6 回答 6

3

要使 CSS 按钮中的文本仅显示在 上hover，您可以使用 CSScontent属性（您必须查找跨浏览器对此的支持）、使用 JavaScript，或者按照其他人的建议更改悬停时文本的颜色。这是一个解决前两个解决方案的 JS fiddle：

http://jsfiddle.net/ABHgN/1/

/*<div id="button1"></div>*/

#button1{
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: green;
}

#button1:hover:before{
    content: "viaCSS ";
}
于 2013-03-14T04:16:42.470 回答
2

一种可能的解决方案是将字体颜色设置为背景颜色，然后在悬停时更改它。这个小提琴演示了它：http: //jsfiddle.net/LXxG3/

在你的 CSS 添加字体颜色

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

和悬停颜色

.button1 hover{
    color:#fff;
}

至于简化你的css，只需将样式应用于基本标签，即button，然后按类名单独样式。例如为两个按钮设置单独的背景颜色... 编辑：将按钮更改为，.baseButton以便它可以用作按钮 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>

另一种方法是对单个按钮使用 id。

css

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

html

<div class="baseButton" id="button1">Your button</div>
于 2013-03-14T03:59:42.793 回答
1

您可以更改文本的颜色hover

并将其置于正常状态，因为它不可见

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

但这不是正确的方法

你也可以使用text-indent

或者我认为content:"text";像我们使用的那样悬停:before并且:after 也可以工作，但我不确定。

笔记：

这在可用性方面也不好，因为当用户必须悬停每个按钮以查看按钮的作用时，他们会感到恼火。

于 2013-03-14T04:03:38.060 回答
0

这是一个快速示例，说明文本如何仅在使用 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;
}

jsfiddle

于 2013-03-14T05:49:51.010 回答
0

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

但是，如果您仍然想继续，这里有一个工作小提琴

基本上像这样设计你的文字

.button1 p {
display:none;

}

然后让它像这样在悬停时可见

.button1:hover p {
    display:inline;

}

于 2013-03-14T04:42:56.990 回答
0

使用珍贵的 CSS 代码；

http://jsfiddle.net/hassaan39/NheFj/

I use the text visibility hidden, on hover visibility visible.简直是最好的。

于 2013-03-16T21:58:51.183 回答